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内 容 提 要 
这 是 一 本 移动 应 用 UI 设计 模式 参考 书 ， 分 10 大 类 介绍 了 70 个 移动 应 用 设计 模式 (包括 反 
模式 )， 用 400 多 个 屏 人 梨 截 图 和 图 解 帮助 读者 理解 和 利用 UI 设计 模式 ， 以 解决 常见 的 设计 难题 ， 
同时 提供 了“ 即 学 即 用 ” 式 的 技巧 和 经 验 。 
本 书 适合 移动 应 用 开发 人 员 、UI 设计 师 阅 读 。 
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"O'Reilly 凭借 一 系列 ( 真希 望 当初 我 也 想到 了 ) 非凡 想法 建立 了 数 百 万 美元 的 业务 。” 


—— — Business 2.0 


"O'Reilly Conference 是 聚集 关键 思想 领袖 的 绝对 典范 。 
—— CRN 


“一 本 O'Reilly 的 书 就 代表 一 个 有 用 、 有 前 途 、 需 要 学 习 的 主题 。” 





Irish Times 


“Tim 是 位 特 立 独 行 的 商人 ， 他 不 光 放 眼 于 最 长 远 、 最 广阔 的 视野 并 且 切 实地 按照 
Yogi Berra 的 建议 去 做 了 : “如 果 你 在 路 上 遇 到 岔路 口 ， 走 小 路 〈 贫 路 )。 回顾 过 
去 ，Tim 似乎 每 一 次 都 选择 了 小 路 ， 而 且 有 几 次 都 是 一 闪 即 进 的 机 会 ， 尽 管 大 路 
也 ,不错 。 
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激发 设计 灵感 的 超级 设计 手册 ! ” 
Bill Scott, PayPal 网 络 开发 部 门 的 高 级 总 监 
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一 一 Erin Malone, Tangible UX 公司 总 裁 


“千言 万 语 都 难以 表达 我 对 这 本 书 的 感激 之 情 ， 它 指导 我 改进 了 正在 开发 的 应 
用 ! 99 
一 一 Agatha June, M P ixit Ip 





译 者 序 


智能 手机 、 平 板 电脑 等 移动 终端 的 进一步 风靡 ， 使 得 移动 应 用 议 计 成 了 一 个 热门 行 
业 。 移 动 应 用 的 设计 质量 影响 着 内 容 提 供 方 的 竞争 力 ， 虽 然 移 动 操作 系统 目前 处 于 
战国” 时代 ,但 茶 些 操作 系统 以 其 独特 的 范 争 优势 已 切 现 条 势 。 不 同 的 操作 系统 对 
移动 应 用 的 设计 有 不 同 的 要 求 和 约束 ， 但 上 总体 来 讲 还 是 要 符合 “以 人 为 本 ”的 设计 
理念 。 那 么 ， 在 移动 应 用 设计 行业 内 部 ， 设 计 师 们 应 该 如 何 借鉴 、 参 考 其 他 终端 的 
交互 设计 ， 开 发 出 真正 能 吸引 用 户 的 移动 应 用 呢 ?” 目 前 已 有 很 多 从 不 同 角 度 介绍 移 
动 应 用 设计 的 书籍 ， 本 书 从 已 有 的 委 例 出 发 ， 以 丰富 的 图 像 和 向 炼 的 语言 癌 读 者 介 
绍 当前 移动 应 用 界面 设计 模式 的 不 同类 型 。 


本 书 的 作者 Theresa Neil 从 2001 年 就 开始 从 事 于 用 户 界 面 设计 行 业 ， 在 过 去 的 十 多 
年 中 ， 特 丽 莎 主持 了 100 多 项 关于 网 站 、 采 面 系 统 和 移动 应 用 设计 的 项 目 。 她 曾 在 
Sabre 科技 公司 的 航空 解决 方案 子 公 司 任 可 用 性 主管 一 职 ， 之 后 建立 了 自己 的 用 户 
体验 设计 咨询 公司 。 她 的 客户 包括 各 种 类 型 的 世界 500 强 企 业 和 非 营 利 组 织 。 正 是 
特 丽 莎 如 此 丰富 的 行业 经 历 保 证 了 本 书 的 专业 性 和 权威 性 。 


要 设计 出 优秀 的 移动 应 用 ， 就 要 先 了 解 目 前 不 同 操作 系统 下 优秀 的 设计 和 案例。 本 书 
介绍 了 当前 所 有 移动 操作 系统 下 典型 的 设计 模式 ， 截 取 了 这 些 系 统 下 典型 应 用 的 界 
和 面 设计 ， 将 其 分 为 了 以 下 10 大 类 。 

(1) 导航 设计 模式 : 主要 导航 和 次 要 导航 模式 。 

(2) 表单 设计 : 通过 表单 实现 民 好 的 布局 和 内 容 输 入 。 

(3) 表格 和 列表 的 设计 : 通过 表格 和 表单 简明 扼要 地 显示 最 重要 的 信息 。 

(4) 

(5) 
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4) AR AUR: 通过 这 些 功能 的 易 用 性 增强 用 户 的 主动 性 。 
5) 工具 的 设计 : 民 好 的 工具 设计 能 营造 出 直接 交互 的 使 用 体验 。 


6) 图 表 设 计 模 式 : 让 用 户 拥 有 控制 大 量 数据 内 容 的 能 
7) 视觉 吸引 : 吸引 用 户 并 促使 其 发 现 产 品 功能 。 


Mi W 


9) 帮助 : 真正 为 用 户 提 供 解 决 问题 的 方法 ， 而 不 是 告知 用 户 问 题 是 什么 。 


( 
( 
(8) 控制 与 反馈 : 帮助 用 户 执 行 操作 ， 并 及 时 提供 反馈 。 
( 
(10) RRN: 移动 应 用 设计 中 应 该 避免 犯 的 错误 。 


本 书面 向 的 读者 是 创建 移动 应 用 的 产品 经 理 、 设 计 师 和 开发 者 。 无 论 是 针对 某 一 移 
动 操 作 系 统 设计 一 球 简 单 的 应 用 ， 还 是 开发 应 用 于 市 场 上 所 有 操作 系统 的 移动 应 用 ， 
本 书 都 能 为 行业 内 的 人 员 提 供 帮 助 。 另 外 ， 本 书 还 可 以 作为 智能 手机 及 其 应 用 爱好 
者 的 参考 读物 ， 书 中 400 多 张 的 应 用 设计 截图 能 极 大 地 开阔 你 的 视野 。 


译 者 对 于 移动 应 用 界面 设计 具有 浓厚 的 兴趣 ， 也 正在 从 事 这 方面 的 教学 工作 。 在 翻 
译本 书 的 过 程 中 ， 译 者 了 解 到 了 非常 丰富 的 设计 模式 和 界面 类 型 ， 本 书 原作 者 关于 
设计 模式 的 心得 和 体会 读 来 也 让 译 者 受益 颇 丰 。 书 中 的 内 容 能 对 译 者 的 工作 提供 
了 非常 大 的 帮助 ， 在 此 感谢 本 书 原作 者 Theresa 为 我 们 带 来 了 如 此 好 的 一 本 设计 参 
考 书 。 

很 多 人 为 本 书 的 翻译 工作 提供 了 帮助 和 支持 ， 在 此 表示 感谢 。 感 谢 我 的 同事 平时 对 
日 常 工作 的 分 担 ， 使 得 我 有 更 多 的 时 间 投 入 到 本 书 的 翻译 工作 。 感 谢 我 的 妻子 平时 
对 我 无 微 不 至 的 照顾 ， 让 我 能 有 健康 的 身体 投入 工作 。 感 谢 我 可 爱 的 女儿 ， 能 让 我 
在 感到 疲劳 时 重新 燃 起 斗志 。 感 谢 人 民 邮 电 出 版 社 图 灵 公 司 的 编辑 全 志 红 ， 她 别 具 
慧眼 的 选 题 使 得 本 书 的 中 文 版 得 以 面世 ， 为 本 书 的 出 版 作出 了 不 小 的 贡献 。 感 谢 所 
有 为 本 书 的 翻译 、 出 版 工作 提供 了 帮助 的 人 们 | 


在 书籍 翻译 过 程 中 ， 译 者 已 及 时 对 原 者 中 出 现 的 些许 印刷 错误 作 了 i] 正 ， 在 此 不 再 
一 一 指出 。 


由 于 译 者 的 英文 理解 能 力 和 中 文 表 达能 力 有 限 ， 译 文 难免 出 现 错误 和 丝 漏 ， 和 希望 领 
域内 的 各 位 同行 和 专家 予以 批评 指正 。 


希望 本 书 能 对 读者 的 工作 和 学 习 有 所 帮助 ! 
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如 本 要 为 未 些 东西 命名 ， 束 要 开始 去 了 解 这 些 东西 。 


R 5 多大 的 儿子 和 其 他 小 护 一 样 ， 喜 欢 看 天 上 的 云 朱 。 几 周 前 他 得 知 ， 不 同 的 云 朱 
有 不 同 的 名 称 。 出 于 对 这 些 东西 的 狂热 ， 他 开始 答 试 记 住 这 些 云 未 的 名 称 一 一 卷 云 、 
AB. Ba, BEB. AMA. MAB. RK, KRAMER, BRAK 
FERA AEA. FEI ZA, RMA Et “RAZ” — d. 


现在 ， 仰 望 天 空 ， 他 能 告诉 我 哪 片 云 夫 叫 什 么 名 字 。 除 此 之 外 ， 他 还 发 现 了 比 以 前 
更 多 类 型 的 云 林 ， 而 且 也 观察 得 更 加 细致 。 他 也 学 会 了 通过 云 打 的 质感 、 颜 色 、 高 
度 、 运 动 轨迹 等 要 素来 判断 云 末 的 类 型 ， 说 不 定 还 有 别 的 要 素 。( 当 然 ， 有 了 时候 区 别 
这 些 云 玉 很 困难 ， 但 这 完全 影响 不 到 他 的 兴致 。) 他 还 能 预测 哪 种 云 会 市 来 雨水 ， 哪 
种 不 会 ， 有 时 候 还 很 准确 呢 。 


基于 上 自己 苞 握 的 云 打 知识 ， 他 以 学 龄 前 儿童 特有 的 风格 分 析 着 气象 趋势 。“ 卷 层 云 预 
示 着 暧 锋 ，” 他 说 ,“ 浓 积 云 会 变 成 积 雨 云 ! 然后 就 会 带 来 暴风 雨 。 


总 之 ， 他 很 享受 了 解 这 些 云 厅 名 称 的 过 程 。 小 孩子 似乎 非常 乐意 为 自己 喜欢 的 东西 
RAS, IER. ME. ME, RE, REE, Me He. SA, tilh 
想象 力 不 仅 仅 局 限于 大 脑 中 存留 的 知识 。 我 的 儿子 虽然 把 茶 些 云 未 称 为 “ 积 云 ， 但 
他 却 依然 能 从 中 看 到 宫殿 、 了 鸭子 和 花椰菜 一 一 我 们 成 人 则 认为 这 是 浪漫 情 怀 的 体现 。 


现在 该 说 说 我 们 大 人 的 事情 了 ， 也 就 是 本 书 的 主题 : 通过 识别 界面 ， 并 为 其 命名 ， 
我 们 能 更 好 地 了 解 这 些 春 面 。 我 们 的 大 脑 能 够 明确 要 寻找 什么 东西 ， 所 以 能 关注 






































注 1: 气象 学 术语 ， 指 暖气 团 前 移 取代 冷气 团 过 程 中 位 于 暖气 团 前 端的 锋 。( 译 者 注 ) 





AELA, Be Ae AE EP EY AT Ee Bo CERS, ALA AT B C 
For (SE FART AD. RETEA A URS fi A, SE LAE A JE SN, S AB BY pt Dad UL Ze AN 
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那么 ， 我 们 怎样 才能 记 住 这 些 类 型 呢 ? 


在 儿子 学 习 关 于 云 示 的 知识 时 ， 对 他 来 说 ， 图 请 息 最 好 的 工具 。 他 得 看 了 大 量 了 的 
图 片 。 通 过 一 些 书 籍 和 网 站 了 解 了 云 打 的 分 类 知识 之 后 ， 他 学 习 观 察 不 同类 型 云 示 
之 间 更 为 细微 的 差异 ， 有 些 差异 是 很 难 用 语言 描述 的 。 


A, WER Se Pc AP BJ A he BACH Bl. Pe PEA, PAM, 
ADR AS ERR We, FR SS ARER SY ff e PE (8 FELD SS E 
不 同类 型 界面 之 间 有 哪些 差异 ! 但 很 明显 ， 所 有 只 楚 设 计 界 面 的 人 一 一 也 就 是 那些 
需要 了 解 界面 的 类 型 ， 将 这 些 知识 作为 职业 素养 的 人 一 一 并 不 需要 这 些 文 字 。 对 于 
一 种 界面 类 型 ， 他 们 需要 的 仅仅 古 通 过 充分 的 朱 述 记 住 这 种 类 型 ， 然 后 再 看 一 些 从 
现实 生活 中 精心 挑选 的 例子 ， 以 此 来 固化 并 记 住 相关 的 知识 。 


在 本 书 中 ，Theresa Neil 收集 了 大 量 的 界面 设计 图 片 。 我 向 直 无 法 想象 需要 付出 多 大 
的 努力 才能 完成 这 项 工作 ， 我 自己 也 尝试 过 训 览 如 此 多 的 移动 应 用 ， 找 出 最 有 
效 的 那些 ， 然 后 把 所 有 的 截屏 截图 仔细 地 进行 归 类 ， 这 绝 不 是 件 小 事 。 

对 于 移动 应 用 界面 设计 师 来 说 ， 这 本 书 无 颖 是 笔 巨 大 的 财富 。 如 有 末 你 喜欢 ， 可 以 直 
接 阅 读 这 本 书 的 内 容 ， 也 可 以 利用 其 中 的 例子 改进 你 的 设计 。 


。 你 需要 目 己 评判 这 些 例子 中 的 哪些 最 有 效 ， 找 出 那些 对 于 你 的 设计 情景 最 有 效 的 界 
面 类 型 。 


。 把 这 本 书 作 为 创作 的 灵感 源 录 。 我 自己 非常 欣 商 书 中 屏幕 截图 的 设计 ， 比 如 图 标的 
设计 、 色 彩 的 搭配 ， 而 不 是 界面 的 类 型 。 


。 用 这 本 书 来 拓展 你 的 知识 ， 它 能 帮助 你 了 解 当前 应 用 的 工作 原理 ， 你 不 需要 费力 殉 
神 地 下 载 ， 并 亲自 使 用 这 些 应 用 (不 要 忘 了 ， 你 需要 有 多 个 设备 才能 试用 完 这 些 
应 用 )。 

读 轩 掩 卷 ， 在 目 己 日 第 使 用 的 移动 应 用 中 寻找 相应 的 界面 类 型 实例 。 实 际 上 ， 只 

你 知道 了 这 些 类 型 的 名 称 ， 就 一 定 会 不 由 自主 地 这 样 做 。 我 儿子 在 户外 儿 次 向 我 指 

出 “ 浓 积 云 ” 之 后 ， 我 束 记 得 非常 清楚 了， 哎呀 一 一 真 不 知道 以 前 我 不 知道 这 些 事 

之 前 邦 古 如 何 生 活 的 。 























尽情 地 享受 这 本 书 吧 | 
Jenifer Tidwell 
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内 容 简介 


我 们 最 近 在 进行 一 项 新 的 移动 应 用 设计 项 目 ， 所 有 有 经 验 的 移动 设计 师 都 抽 不 开 身 。 
我 只 有 不 到 一 周 的 时 间 ， 把 目 己 在 移动 交互 设计 项 目 方面 的 经 验 分 享 给 新 手 设计 师 ， 
所 以 我 用 大 量 的 截屏 截图 制作 了 一 个 快速 入 门 教 程 ， 其 中 描述 了 比较 好 的 设计 和 不 
太 好 的 设计 。 这 样 ， 就 逐 壮 累积 成 了 一 系列 不 同类 型 的 移动 应 用 设计 方案 。 





虽然 我 对 这 些 不 同类 型 的 界面 设计 进行 了 分 类 ， 但 我 知道 真正 的 价值 并 不 在 于 
识别 出 某 个 界面 的 类 型 ， 而 是 收集 的 数 以 百 计 的 设计 和 案例。 本 书 不 仅仅 只 包括 
了 作者 本 人 所 喜爱 的 界面 设计 的 抽象 模式 ， 而 且 还 是 移动 应 用 设计 的 展示 平 
台 ， 其 中 包含 了 大 量 的 设计 案例。 其 中 有 超过 400 张 当 前 应 用 于 iOS, Android, 
BlackBerry, WebOS, Symian 和 Windows 等 系统 的 应 用 程序 的 屏幕 截图 ， 并 对 其 
进行 了 分 类 。 本 书 的 网 站 www.mobiledesignpatterngallery.com 和 Flickr EA #8 Fr zs 
(Photostream) 内 包括 更 多 的 案例 。 


读者 对 象 


本 书面 癌 创 建 移动 应 用 的 产品 经 理 、 设 计 师 和 开发 者 。 随 着 企业 定义 并 改进 上 自身 的 
移动 应 用 策略 ， 寻 找 最 有 效 的 设计 案例 变 得 异 闻 艰难 ， 特 别 征 那些 应 用 于 多 操作 系 
统 的 设计 。 无 论 是 设计 一 款 简 单 的 iPhone 应 用 ， 还 是 为 市 场 上 所 有 流行 的 操作 系统 
设计 产品 ， 本 书 中 的 设计 案例 都 能 为 沼 见 的 设计 问题 提供 解决 思路 。 


Safari^XE £k B Ji 
D. Safari 在 线 书 店 (Safari Books Online) 是 一 个 能 及 时 啊 
Sa fa ri 应 读者 需求 的 数字 图 书馆 ， 你 可 以 在 其 中 搜索 到 7500 本 
Books Online 以 上 的 技术 书籍 、 创 意 参 芳 书 籍 ， 还 有 能 帮助 你 迅速 解 
决 回 题 的 视频 教程 。 


订阅 之 后 ， 你 可 通过 手机 或 移动 设备 访问 该 在 线 书店 的 所 有 书籍 内 容 ， 观 看 所 有 视 
频 。 还 可 以 在 新 书 付 桩 之 前 阅读 书 夭 内容， 阅读 那些 还 设 有 扎 写 完 成 的 书稿 ， 并 癌 
作者 反馈 信息 。 除 此 之 外 ， 你 还 可 以 复制 示例 代码 、 下 载 喜 欢 的 草 贡 、 为 关键 的 部 
分 定义 书签 、 创 建 笔记 、 打 印 页 面 以 及 享受 其 他 方便 便捷 的 功能 所 珊 来 的 好 处 。 


O'Reilly Media 公司 已 经 把 这 本 书 〈 英 文 版 ) 上传 到 了 Safari 在 线 书店 。 点 击 http:// 
my.safaribooksonline.com 人 免费 注册 ， 你 就 可 以 访问 本 书 英 文 版 以 及 O^ Reilly 和 其 他 
出 版 社 出 版 的 同类 书籍 。 
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O'Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘误 


表 、 示 例 代 码 以 及 其 他 信息 。 本 书 的 网 站 地 址 古 : 
http://oreilly.com/catalog/9781449314323 

中 文书 : 
http://www .oreilly.com.cn/index.php?func-book&isbnz9787115296481 

对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电子 邮件 到 : 
bookquestions G oreilly.com 

关于 本 书 的 更 多 信息 、 会 议 、 资 源 中 心 和 了 网络， 请 访问 以 下 网 站 : 
http://www.oreilly.com 

我 们 在 Facebook 的 地 址 如 下 : 
http://facebook.com/oreilly 

请 关注 我 们 的 Twitter 动态 : 
http://twitter.com/oreillymedia 

我 们 的 YouTube 视频 地 址 如 下 : 


http://www.youtube.com/oreillymedia 
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导航 


主要 导航 模式 : 跳板 式 (Springboard), WHAT (List Menu), AMRAN 
(Tab Menu). 、 陈 列 馆 式 〈Gallery) 、 仪 表 式 (Dashboard) 、 隐 喻 式 (Metaphor), #8 
级 菜单 式 (Mega Menu), 


次 级 导航 模式 : 页 面 轮 盘 式 (Page Carousel), 、 图 片 轮 盘 式 (Image Carousel), PR 
列表 式 (Expanding List) 。 


我 喜欢 阅读 移动 应 用 市 场 里 的 用 户 评 论 ， 以 此 来 更 好 地 了 解 人 们 是 如 何 使 用 这 些 应 
用 的 。 市 场 评分 系统 古 极 具 价 值 的 反馈 工具 ， 传 统 的 网 络 和 桌面 应 用 程序 都 不 具备 
这 样 的 功能 。 它 提供 了 丰富 的 关于 客户 偏好 和 期 望 的 信息 。 


一 般 来 说 ， 大 部 分 给 出 4 星 或 5 星 的 评论 都 不 是 十 分 具体 。 这 些 评论 通 第 是 :“ 非 常 
REA — aR, “ER EIR, ISTH RD.” 而 1 星 或 2 星 的 评论 却 包含 有 更 多 
的 内 容 ， 这 类 评论 大 都 指出 了 应 用 的 问题 所 在 。 常 见 的 负面 反馈 大 致 如 下 : 


。 ERP HATE 

。 RSE EN (H, Reve, ERIKA) 

。 FRSA 〈 无 法 返回 ， 找 不 到 某 些 东西 ……) 

。 (ERLEBT IR ELT 
前 两 项 问题 无 法 通过 改变 界面 模式 解决 ， 但 用 户 经 和 常 抱 她 的 第 三 、 第 四 两 项 问题 却 
是 可 以 通过 使 用 不 同 模式 的 界面 解决 的 。 参 考 常 见 的 导航 设计 模式 ， 可 以 保证 用 户 
能 够 在 你 的 应 用 中 找到 并 使 用 那些 有 用 的 功能 。 











1.1 主要 导航 模式 

正如 精良 的 设计 一 样 ， 优 秀 的 导航 也 大 象 无 形 。 不 管 是 浏览 好 友信 息 ， 还 是 租赁 汽 
车 ， 完 美的 导航 设计 能 让 用 户 根 据 直 觉 使 用 应 用 程序 ， 也 能 让 用 户 韭 常 容易 地 完成 
所 有 任务 。 一 款 应 用 的 导航 可 以 被 设计 成 各 种 样式 ， 但 我 想 着 重 介绍 6 种 主要 的 导 
航模 式 ， 也 就 是 主 菜 单 的 导航 模式 (E 1-1), 
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图 1-1 主要 导航 模式 


1.1.1 跳板 式 
跳板 式 导 航 对 操作 系统 并 没有 特殊 要 求 ， 在 各 种 设备 上 都 有 民 好 表现 。 它 有 时 也 被 
称 为 “快速 启动 板 ”(Launchpad)。 跳 板式 导航 的 特征 是 ， 登 录 界 面 中 的 菜单 选项 
就 是 进入 各 个 应 用 的 起 点 。Facebook 应 用 沿用 了 iOS 主 界面 上 的 跳板 式 设 计 ， 其 他 
应 用 随 之 跟风 〈 见 图 1-2 至 图 1-4). 
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1-2 Facebook 的 跳板 式 导航 和 Ovi Maps 应 用 
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1-3 Trulia 和 LinkedIn 的 导航 设计 
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1-4 Palm 手机 上 的 NewsRoom 和 Nokia 手机 上 的 Yahoo | 





个 性 化 的 跳板 式 导航 可 在 显示 末 单 选项 的 同时 显示 用 户 个 人 资料 。 通 和 常会 提供 自 定 
义 功能 ， 允 许 用 户 改 变 跳板 式 导航 的 布局 (ULI 1-5)。 
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1-5 PayPal 用 户 个 性 化 的 跳板 式 导 航 和 Gowalla 应 用 的 早期 版 本 








常见 的 布局 形式 是 3x3、2x3、2x2 和 1x2 的 网 格 ( 见 图 1-6)。 但 跳板 式 导 航 不 一 
定 非 要 拘泥 于 网 格 布 局 ， 你 可 以 成 比例 地 放大 某 些 选项 ， 以 彰显 其 重要 性 。 在 iPhone 
的 应 用 Masters F, VIDEO 选项 就 是 其 他 菜单 选项 的 2 ~ 3 倍 大 (WEA 1-7). 














1-6 ”跳板 式 导 航 的 网 格 布局 
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1-7 Norton Mobile 85 2 x 2 网 格 布 局 和 Masters 的 不 规则 布局 











Rj 8 


m 为 同等 重要 的 内 容 项 使 用 网 格 布局 ， 为 相 比 之 下 更 为 重要 的 内 容 项 使 用 不 
。 规则 布局 形式 。 视 情况 使 用 个 性 化 设置 和 自 定义 选项 。 


1.1.2 ”列表 菜单 式 


列表 菜单 式 导航 与 跳板 式 导航 的 共同 点 在 于 ， 每 个 菜单 项 都 是 进入 应 用 各 项 功能 的 入 
口 点 。 这 种 导航 有 很 多 种 变化 形式 ， 包 括 个 性 化 列表 菜单 (Personalized List Menu), 
分 组 列表 (Grouped List) 和 增强 列表 (Enhanced List) 和 等。 增强 列表 是 在 简单 的 列表 
菜单 之 上 增加 搜索 、 训 览 或 过 让 之 类 的 功能 后 形成 的 〈 见 图 1-8 至 图 1-11)。 
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1-8 FIR: Valspar Paint 和 Kayak 应 用 











RadioTime 


MMradio 








$i Home 
ACT # Calendar 

To Do 
Search w So 

iM] Journal 

Loca 

© Settings 
Word CZ 

Help 

More Cozi 


Music 











1-9 列表 菜单 : Palm 手机 上 的 RadioTime 和 Cozi 应 用 
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1-10 个 性 化 列表 : Blackboard 和 Zoho CRM 应 用 
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1-11 增强 列表 : Amazon MP3 MA; 分 组 列表 : Stratus 应 用 


Ya 
列表 全 单 很 适合 用 来 显示 较 长 或 拥有 次 级 文字 内 容 的 标题 。 使 用 列表 沫 单 
。 的 应 用 要 在 所 有 次 级 屏 医 由 提供 一 个 选项 ， 用 来 返回 来 单列 表 。 通 币 的 做 


法 征 在 标题 栏 上 显示 一 个 市 有 列表 图 标 或 “菜单 ”字样 的 按钮 。 














1.1.3 选项 卡 式 
选项 卡 式 导 航 在 不 同 的 操作 系统 上 有 不 同 表现 ， 对 于 选项 卡 的 定位 和 设计 ， 不 同 操 


作 系 统 有 不 同 的 规则 LE 1-12)。 如 采 要 为 你 的 应 用 选择 这 种 导航 模式 ， 就 要 为 
不 同 的 操作 系统 专门 定义 选项 卡 的 位 置 。 























Apple iOS BlackBerry Android 








webOS Symbian Windows Mobile 


1-12. 不 同 操作 系统 内 选项 卡 的 位 置 


iOS, WebOS FH BlackBerry 系统 都 把 选项 卡 放 在 了 屏幕 底 问 ， 这 样 用 户 就 可 以 用 拇 
指 进行 操作 ( 见 图 1-13 和 图 1-14). 
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1-14 ”位 于 屏幕 底部 的 选项 卡 ，BlackBerry 系统 的 应 用 World 和 WorldMate 


屏幕 底部 水 平 深 动 的 选项 卡 是 个 非常 不 错 的 设计 ， 如 图 1-15 中 的 Starbucks 和 Blue 
Mobile 应 用 ， 它 可 以 在 同一 屏 内 提供 更 多 的 操作 选项 。 





4l O2-UK 3G 16:03 


“Drink Detail Drink Size Back Microsoft 





Drinks 











1-15 ”位 于 屏幕 底部 的 滚动 选项 卡 : Starbucks 和 Blue Mobile 应 用 


Android, Symbian 和 Windows 系统 都 把 选项 卡 定位 在 屏幕 的 顶端 ， 这 种 形式 看 
上 去 很 眼熟 ， 因 为 它 模仿 了 标准 的 网 站 导航 模式 。Nokia 和 Windows 都 在 屏幕 顶 
端 设 计 了 可 该 动 的 选项 卡 ， 用 户 移动 选项 卡 后 能 看 到 更 多 的 菜单 项 〈 见 图 1-16 和 
ID. 
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1-16 位 于 屏幕 顶端 的 滚动 选项 卡 : Harvest TimeTractor 应 用 和 Nokia 上 的 Fring 应 用 
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1-17 位 于 屏幕 顶端 的 选项 卡 : Foursquare 和 HitPost 应 用 








为 已 选择 的 菜单 项 设置 不 同 的 视觉 效果 ， 用 户 就 能 清晰 地 知道 自己 选择 了 
哪 一 项 。 使 用 易于 识别 或 带 有 标签 的 图 标 。 


1.1.4 ”陈列 馆 式 

陈列 馆 式 的 设计 通过 在 平面 上 显示 各 个 内 容 项 来 实现 导航 ， 主 要 用 来 显示 一 些 文 
人 章 、 菜 谱 、 照 片 、 产 品 等 ， 可 以 布局 成 轮 盘 、 网 格 或 用 幻灯 片 演 示 ( 见 图 1-18 至 
1-20). 
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1-18 BBC 和 PULSE 应 用 








-ilZONG = 5:50 PM 84% EE — wmm 8:13 


flickr: cone S paris. france 


Q~, Karachi ENROL 


TM 











1-19 Flickr 应 用 和 Palm 手机 上 的 Picturelt 应 用 


有 上 时， 对 这 些 内 容 进 行 分 组 更 易于 用 户 浏 览 。Dwell 利用 侧 边 选项 卡 把 陈列 馆 式 导 
航 里 的 内 容 组 织 成 了 可 供用 户 管理 的 内 容 块 。 
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1-20 Dwell 应 用 








Bs ll TE SHE ER PA PAO, mE ENA. 
2. 


1.1.5 NRK 

仪表 式 导航 提供 了 一 种 度量 关键 顷 效 指标 (Key Performance Indicators, KPI) 是 否 
达到 要 求 的 方法 。 经 过 设计 以 后 ， 每 一 项 量度 都 可 以 显示 出 额外 的 信息 。 这 种 主要 
的 导航 模式 对 于 商业 应 用 、 分 析 工 具 以 及 销售 和 市 场 应 用 非常 有 用 ( 见 图 1-21). 
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1-21 Mint 和 Ego 应 用 中 的 仪表 式 导航 
不 要 使 用 过 多 的 仪表 式 导 航 。 你 需要 开展 研究 才能 决定 应 该 对 哪些 关键 量 
Ly 度 采用 仪表 式 导 航 。 


1.1.6 KÈ 
这 种 导航 的 特点 是 用 页 面 模 仿 应 用 的 隐喻 对 象 。 这 种 导航 主要 用 于 游戏 ， 但 在 帮助 





人 们 组 织 事物 (如 日 记 、 书 籍 、 红 酒 等 )， 并 对 其 进行 分 类 的 应 用 中 也 能 看 到 ( 见 
1-22 至 图 1-25). 
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1-22 Awesome Note 应 用 














1-23 Cellar 应 用 
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1-24 DoltTomorrow 和 TripJournal 应 用 
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Chapter 


My girlfriend was 15 percent of my age, 
and I was old-fashioned enough that it 
bugged me. Her name was Lil, and she was 
second-generation Disney World, her 
parents being among the original ad- 
hocracy that took over the management of 
Liberty Square and Tom Sawyer Island. She 
was, quite literally, raised in Walt Disney 
World and it showed. 


It showed. She was neat and efficient in 
her every little thing, from her shining red 
hair to her careful accounting of each gear 
and cog in the animatronics that were in 
her charge. Her folks were in canopic jars 
in Kissimmee, deadheading for a few 
centuries. 





1-25 Aldiko Book Reader 应 用 











| — a 3E V C Hb f FH ned, CERTO ED AR RT REX X 10.1 节 出 现 的 反 模 
. 式 (anti-Pattern), 
SA 


1.1.7 超级 菜单 式 

移动 设备 上 的 超级 菜单 式 导航 与 网 站 所 用 的 超级 菜单 导航 类 似 ， 它 在 一 个 较 大 的 覆 
盖 面 板 上 分 组 显示 已 定义 好 格式 的 菜单 选项 。RipCurl 网 站 就 利用 超级 菜单 显示 服 
饰 的 次 级 类 别 (OLE 1-26), 
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1-26 RipCurlShop.com 


WebOS 系统 版 本 的 Facebook FH ERRERA iR] UL. HES, T BETON TEL E g 
的 选项 。Walmart 在 它们 的 Android 应 用 中 也 采用 了 超级 菜单 式 (JLE 1-27). 


» A 


| 在 选择 导航 模式 之 前 ， 首 先 要 确定 信息 架构 。 如 琳 要 导航 的 对 象 仅 仅 是 应 
Ly 。 ”用 中 少数 主要 内 容 ， 束 可 以 使 用 选项 卡 之 类 的 导航 模式 。 
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1-27 WebOS 系统 下 的 Facebook 和 Android AZ KAY Walmart 


1.2 ”次 级 导航 模式 

本 章 不 仅 只 包括 一 些 莱 单 类 型 的 导航 ， 还 将 介绍 一 些 其 他 导航 模式 。 所 谓 的 次 
级 导航 (Secondary Navigation) 是 指 那些 位 于 某 个 页 面 或 是 模块 内 的 导航 。 例 
a, ANZ 应 用 中 的 跳板 式 导 航 就 是 主要 的 选项 卡 式 导航 的 次 级 导航 。 同 样 ， 在 
Jamie Oliver's Recipes 应 用 中 ， 列 表 菜 单 是 主要 的 选项 卡 式 导航 的 次 级 导航 ( 见 
图 1-28), 





Payments 


Choose a video 


Welcome to 20 
Transfer Pay Anyone Minute Meals 
Move money between All you need is their BSB 01:01 
your accounts and Account Number 


"| Chopping an 
onion 


03:41 


! Making a risotto 


10:42 


Pay to Mobile Pay Bills koci ec 


Using the BPAYE 
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Payments 





1-28 主要 导航 : 选项 卡 式 , 次 级 导航 : 跳板 式 〈 左 图 )。 主 要 导航 : 选项 卡 式 , 次 级 导航 : 
IRA C658) 


所 有 的 主要 导航 模式 都 可 以 用 作 次 级 导航 。 我 们 经 第 能 够 看 到 选项 卡 下 再 用 选项 卡 
导航 、 选 项 卡 下 用 列表 导航 、 选 项 卡 下 采用 仪表 式 导 航 、 跳 板式 导航 下 采用 陈列 馆 
式 导航 等 情况 CULE 1-29), 


10:29 PM 


Curried branzino with coconut 
nce 


1 overdue 


mild curry powder 
1 today 


Credit cards à o chutney 
Visa card 02/2009 
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1-29 主要 导航 : 选项 卡 式 , 次 级 导航 : 仪表 式 ( 左 图 )。 主 要 导航 : AMER, 次 级 导航 : 
ARFA (OB) 





还 有 一 些 其 他 的 导航 模式 也 可 作为 次 级 导航 ， 但 不 太 适 合用 作 主 要 导航 ( 见 图 1-30). 
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1-30 ”其 他 次 级 导航 模式 


1.2.1 页 面 轮 盘 式 

通过 这 种 导航 模式 ， 操 作者 可 利用 “请 动 ”操作 快速 浏览 一 系列 离散 的 页 面 。 页 面 
tzr (Page Indicator, iOS 中 的 术语 ， 指 用 来 表示 页 面 数量 的 小 点 ) 可 以 显示 出 
导航 中 的 页 面 数量 ; 执行 “ 背 动 ”操作 可 以 显示 下 一 页 。 1-31 和 图 1-32 中 的 4 
个 例子 都 是 基 个 已 选中 选项 卡 (Tab) 中 的 页 面 轮 盘 导航 。 


ullO2-UK ^ P iPod = 10:29 AM um 
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1-31 Nigella Quick Collection 和 Zappos 应 用 
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1-32 Yahoo! Finance 和 IMobile 应 用 


页 面 轮 盘 式 导 航 有 一 定 的 局 限 性 。 如 果 页 面 超过 8 个 ， 最 好 考虑 使 用 列表 菜单 式 导 
航 ( 见 图 1-33), 
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1-33 ExcellentAnalytics 应 用 一 一 其 中 的 页 面 太 多 了 
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1.2.2 图 片 轮 盘 式 

图 片 轮 盘 式 导航 类 似 于 一 个 二 维 轮 盘 ， 或 者 说 更 像 是 iTunes 的 Cover Flow 导航 。 
IMDB 用 图 斤 轮 盘 式 导航 显示 观看 次 数 最 多 的 电影 。 在 为 Adobe Flex Showcase ix 
计 的 零售 应 用 中 ， 作 者 也 使 用 这 种 导航 来 展示 特色 产品 (LA 1-34), 
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1-34 IMDB 应 用 和 Adobe Flex 4.5 Showcase 应 用 


CE 1: 通过 唱片 封面 形象 化 地 翻 查 数字 化 音乐 数据 库 的 三 维 图 形 用 户 界面 。( 译 者 注 ) 
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Photo Cookbook 应 用 也 使 用 了 图 片 轮 盘 式 导 航 。 这 个 应 用 根据 食材 类 型 分 儿 列 显示 
产品 图 片 ( 见 图 1-35), 





MEM The Photo Cookbook — Baking 
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1-35 Photo Cookbook 应 用 


Tap'n'Scrap EIRFA f LA ERRAKI E A FER LE 1-36), od it ae He 
盘 式 的 旋转 可 以 选择 它 的 背景 和 框架 ， 剪 贴 王 则 使 用 了 Cover Flow 的 旋转 风格 。 





Edit Scrapbook 


Choose Background Paper 











1-36 Tap’n’Scrap 应 用 


ANZ 的 银行 业务 应 用 利用 Cover Flow 式 的 导航 显示 账户 信息 和 支付 源 ( 见 图 1-37). 





TETUR B. PAST ZA, WIERA RSI, FEAT RZ PLEA 
无 比 兴 和 理 ， 只 要 使 用 几 次 之 后 就 会 觉得 支付 过 程 非常 简单 。 





ANZ Advantage Account 
$1,002.73 


Dominic Citizen 
0123 456 789 


ANZ Everyday Visa Debit 


ivallable Funda: $2,522.98 





| Your Name Annabelle 











1-37. ANZ 中 的 图 片 轮 盘 式 导 航 在 选择 支付 卡 时 非常 有 效 ， 但 很 快 就 过 时 了 


Va 


图 片 轮 盘 式 导 航 能 很 好 地 显示 清新 悦目 内 容 ， 如 艺术 品 、 产 品 或 照片 等 。 
, 无 论 是 使 用 第 头 、 部 分 图 片 内 容 或 是 页 面 指示 融 (点 )， 它 都 能 提供 民 好 的 


视觉 化 功能 可 见 性 ， 以 此 告知 用 户 有 更 多 的 内 容 可 以 访问 。 


1.2.3 扩展 列表 式 

扩展 列表 式 导 航 通过 下 拉 屏 幕 显示 更 多 的 信息 。Gingerbread 版 本 的 Android 系统 在 
通话 记录 (Call Log) 中 就 使 用 了 这 种 导航 模式 。 所 有 来 自 同一 号码 的 来 电 都 被 压 
缩 显 示 在 一 行 中 ， 点 击 图 标 可 以 扩展 列表 来 显示 各 个 通话 记录 〈 见 图 1-38)。 


这 种 导航 模式 多 见于 网 站 的 移动 版 本 ， 移 动 应 用 中 使 用 较 少 ， 但 在 这 两 种 情况 下 都 
能 很 好 地 工作 。 以 gap.com 网 站 的 移动 版 为 例 ， 扩 展 列表 式 导 航 代 蔡 了 传统 网 站 上 
的 级 联 式 列表 ， 用 来 显示 所 有 女装 类 型 ( 见 图 1-39), 


Va 
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Home 


Home 


eo Home 


Home 


Voicemail 





Call log 


Home 


Home 
@ Home 
rome 


Home 


Home 


Home 
Home 


Voicemail 





1-38 Android 系统 的 通话 记录 模块 








iPod © 3, 6:25 PM 


me iPod > 3 6:25 PM —: 








Women 


Body 


Maternity 


Men 





一 - 





Women 一 - 
k Outerwear > 


Sweaters > 
Shirts & Blouses > 
Ts & Tops > 
Jeans > 





Pants > 





1-39 Gap 网 站 的 移动 版 
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vB 2 SS 





表单 


Checkovt- 


sp P^ otal $000 »; uy 
Shipping address Se 
sp P of ag 
posi Payment method 
«pr U^ r 
a — 
Te 
v 
Ma 


常见 表单 模式 : 登录 表单 (Sign In)、 注 册 表 单 (Registration)、 核 对 表单 (Checkout), 
计算 表单 (Calculate )、 搜 索 表 单 (Search Criteria) 、 多 步骤 表单 (Multi-step)、 长 
表单 (Long Form), 


大 部 分 网 络 应 用 程序 都 依靠 表单 实现 数据 和 输入 或 布局 。 虽 然 我 们 已 探讨 过 基本 表单 
的 设计 ， 并 提出 了 一 些 设计 策略 ， 但 网 络 上 仍 到 处 充斥 着 糟糕 的 表单 。 大 部 分 时 候 ， 
我 们 都 别 无 选择 ， 只 有 在 其 中 摸 扑 深 打 ， 历 尽 艰 全 才能 购买 物品 、 癌 应 用 程序 提交 
数据 或 是 回答 调查 问卷 (LE 2-1)。 





国资 料 送 付 先 
ORARIT A 
昌 忒 他 住所 (勤务 先 丰 点 ) [二 送 付 才 名 





图 现 住所 以 外 中 资料 送 付 先 住所 
Ke (RF) 








m 


例 ) 265 XB 





m 


KZ (20217) ‘2845 例 ) AEX HOD 


过 
+ 


GERD £4) 000-0000 


R ‘GIRL CF ln ie) 
区 都 | JEIRU TEE HJ 


例 ) 银座 7-3-5 








m 


例 ) DbOVYYav203 828 


| 





GERD 





GERD 


4 smt um 
am A 
m LÀ 
E an 
m 


RA 











2-1 ”这 个 表单 包含 有 很 多 惹眼 的 视觉 化 元 素 ， 妨 得 了 用 户 对 表单 所 提问 题 的 理解 。 来 目 
Wroblewski, Luke. 2008. Web Form Design: Filling In the Blanks. New York: Rosenfeld Media’ 


TE 1: 本 书 中 文 版 为 《Web 表单 设计 : 点 石 成 金 的 艺术 》， 已 于 2010 年 由 清华 大 学 出 版 社 出 版 发 行 。 
( 译 者 往 ) 
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JN Re NT ASS BRT Ae t AB LE EE HA DFS AY TE Ue EE, Eiir E 
何 表单 之 前 ， 我 强烈 建议 读者 先 阅 读 以 下 资料 打 好 基础 。 


Web Form Design: Filling in the Blanks, Luke Wroblewski # (由 Rosenthal Media 出 版 ) 


Forms on Mobile Devices: Modern Solutions, Luke Wroblewski # (出 自 Smashing 
Magazine 网 站 ) ^ 


Mobile Form Design Strategies, Chui Chui Tan 著 (出 自 UX Booth 网 站 ) ? 


2-2 中 的 表单 设计 模式 可 以 作为 这 些 书籍 和 文章 的 补充 。 





e 5 fs 
Sign In Regster Checkout 
Pr arm mated tox £001 
"d Total $000 
Sgn In - 
Regster Forgo Password? Register Input 
Ships; id 
Payment method 
Place Order Calculate 
Searth TiHe 
nreno | 
Pa: 
Show 100 Results — Submit 
搜索 表单 多 步骤 表单 长 表单 











2-2 USE 


注 2: ZB) http://www.smashingmagazine.com/2010/03/1 1/forms-on-mobile-devices-modern-solutions/, (i#477£ ) 
TE 3: 参见 http://www.uxbooth.com/blog/mobile-form-design-strategies/, (VETE) 





4c^- 
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2.1 登录 表单 


登录 表单 应 该 只 包括 少量 的 信息 输入 : 用 户 名 、 密 码 、 操 作 按钮 、 密 码 帮 助 、 注 册 
选项 等 。 有 些 应 用 将 这 些 信息 输入 框 设计 在 一 屏 内 显示 ， 如 Photobucket 和 Groupon 
( 见 图 2-3), 








9:27 PM j; 8:14 PM 


felalelneleltle cin Signin Sign Up 


Login to upload and manage your albums. 


Login 


Forgot Username or Password 


Join Now. It's Free! 


n 


a All information will be sent over a secure connection. 
My Albums 











2-3 Photobucket 和 Groupon 应 用 


另外 一 些 应 用 ， 如 Kik 和 Springpad 则 首先 显示 “登录 ”或 “注册 ”选项 ， 然 
后 根据 用 户 的 选择 将 其 导向 相应 的 表单 。Springpad 和 Groupon 还 允许 用 户 使 用 
Facebook 或 其 他 账号 登录 (JILA 2-4) , 


有 一 种 登录 表单 直接 抛弃 了 用 户 名 输入 框 ， 只 要 求 用 户 输入 密码 。 在 安装 应 用 时 ， 
用 户 就 已 经 具备 了 使 用 权限 ， 只 要 再 输入 密码 就 可 以 访问 敏感 数据 了 。 这 种 形式 多 
见于 金融 领域 的 应 用 ， 如 图 2-5 所 示 的 PNC 的 Virtual Wallet， 但 也 适用 于 其 他 行 
业 。 把 移动 设备 的 PIN (Personal Identification Number， 个 人 识别 码 ) 作为 密码 能 
实现 同样 的 效果 。 
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8:21 PM 


Welcome to Kik 
New to Kik? Springpa UA 


Create New Account 


8:27 PM (m) 





Already have a Kik account? Login Register 


Log In 


Or you can log in with: 


Springpad saves the things you want to - 
remember on the web and on your phone. 
Notes, tasks, lists, wines, recipes and more. 
Scan barcodes, take photos, search nearby 
places. Syncs with http:;//springpadit.com - 














2-4 Kik X) Springpad 应 用 





iPod > 10:32 PM [ 


( | Virtual Wallet. 





limi o 1] 


PNC.com 














2-5 PNC 的 VirualWallet 应 用 
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J 不 要 自己 “独创 ”登录 表单 ， 采 用 常见 的 设计 方案 ， 这 样 更 易于 用 户 登 录 。 
. 提供 取 回 已 忘记 密码 的 方式 。 


2.2 ”注册 表单 
注册 表单 与 登录 表单 一 样 ， 应 该 只 BRP REHSTES EA e Chui Chui Tan 建议 应 该 宣 


不 留情 地 砍 掉 那些 “不 带 有 任何 重要 功能 的 元 素 "。 这 意味 着 要 请 除 掉 那些 元 余 的 输 
入 框 ， 比 如 再 次 确认 E-mail 和 密码 (ULI 2-6), 

















BEBO a ‘Gh H 1:51 PM 








/ | 
( Back 
M | 








Have a Facebook account? 


. a i f Sign Up with Facebook 
theresaneil& gmail.com 


GOWALLA WILL NEVER POST TO YOUR 
ACCOUNT WITHOUT YOUR PERMISSION 




















= or -— 














Sign Up Now! First name 








Last name 


* | Email 

















Password 








2-6 PageOnce 和 Gowalla 应 用 


注册 表单 有 可 能 是 你 为 应 用 设计 的 第 一 个 表单 ， 所 以 设计 的 标签 应 当 易于 陪读 。 不 
要 把 标签 和 输入 框 水 平 排列 ， 而 应 该 采用 垂直 排列 的 方式 ， 如 Evernote 应 用 的 设 
计 ， 或 使 用 水 印 式 标签 ， 如 Intuit 应 用 的 设计 (E 2-7 和 图 2-8 ) 。 
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BE OSE & MG o» 


X Jeffrey-Spencer... - 





Walkthrough On Apr-5-2011 | First Name Theresa 


date Tue Apr 5/2011 Last Name Neil 


Card Number 


start time 8:07 AM 





Expiration Y) Ea 
end time ... 
CVV/CVN n 
Subject Subjec v 
Billing Address 


Grade Le... M 


Street Line 1 


Street Line 2 

































Ci 
Jeffrey-Spencer Elementary = 
; ———— Sfásbama v) 
> Upload... f v 
区 Uploa TOG Postal Code 
图 2-7 ”水 平 排列 的 标签 尾 端 会 被 截断 显示 
xm Bow BAAM 1:54» iPod = 8:19 PM 
Back Sign U 
Create a Free Account as 3 p 
Enter your contact information: 
Password | 
Birth Year 
Create a password to securely access 
GoPayment in the future 
PB 
Gender 
A Male A Female | 
INTUIT 
图 2-8 垂直 排列 的 标签 和 水 印 标签 
36 | #22 








aa e ee MNT SN 
反馈 ( 见 图 2-9)。 更 多 设计 技巧 ， 参 见 第 SE, 





iPod 4 8:22 PM LU GD B A HI 12-010 


Your Name Register Register 


Pick a unique username that will 
identify you on Kik. 


Pick a unique username that will 
identify you on Kik 


th Checking Availability... 


TULLE 5s. 


图 2-9 Kik 应 用 以 内 联 方式 显示 不 可 用 用 户 名 的 反馈 信息 
































P 注册 界面 应 该 简 洗 明了 ， 最 好 在 一 屏 内 显示 完 所 有 要 填 的 信息 ， 注 册 按 钮 
s 应 该 显示 在 同一 屏幕 内 。 确 保 已 注册 用 户 能 很 容易 地 登录 。 


2.3 核对 表单 


与 使 用 应 用 程序 核对 信息 相 比 ， 更 常见 的 方式 古 通 过 专门 为 移动 设备 优化 后 的 网 站 
核对 信息 ， 但 两 者 的 设计 原则 是 相通 的 。 


在 核对 表单 中 使 用 设备 的 标准 控制 方法 。 


把 多 屏 信 息 合 并 到 一 个 核对 表单 中 。 诸 如 Zappos 和 Apple 之 类 的 零 — 
了 一 个 较 短 、 包 含 几 部 分 信息 的 核对 表单 ， 用 户 可 以 单独 核对 每 一 部 分 的 信息 CUL 
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2-11)。 其 他 零售 商 ， 如 Target 和 Gilt 则 使 用 长 表单 来 核对 信息 。 
提供 快速 核对 机 制 ， 比 如 核对 已 存储 的 名 片 信息 ， 或 通过 登录 核对 信息 。 
在 标题 处 显示 安全 锁 来 向 用 户 表 明 当 前 连接 是 安全 的 。 


fa Eme, Au] 2-10 所 示 的 Home Depot 的 设计 ,不 一 定 就 是 最 快 、 最 有 效 的 
方法 。 更 好 的 设计 参见 多 步骤 表单 。 





SHIPPING ADDRESS Help 


Step 2: Step 3: Step 4: 
Shipping Shipping Payment Order 
Address Method & Summary Confirmation 


“First Name 


“Last Name 


“Address 1 


*Select a State | v 


会 E. EE » 


Home Shop Toolbox Videos 

















2-10 Home Depot 的 信息 核对 向 导 是 移动 应 用 的 次 最 优 设计 











iPod = 6:00 PM ES iPod = 10:32 AM m 



























Cancel Checkout CHECKOUT 

‘ | Shipping Speed 
iPad Smart Cover - $39.00 Standard Shipping (4-5 business days) > 
Polyurethane - Blue $0.00 





Ships: within 24 hours 
Delivers Apr 5 - Apr 8 


Shipping Address 





summary Cart Subtotal $39.00 CIR UL > 
Free Shipping $0.00 
Estimated Tax $3.12 Payment Information 
Order Total $42.12 Please select a payment type. > 
shipping Standard Shipping 
SUBTOTAL (1 ITEM): $40.00 
inni Mal STANDARD GROUND SHIPPING: $0.00 
sa mk Theresa Neil > S556 
— | DISCOUNTS: $0.00 
payment > GRAND TOTAL: $40.00 


























By clicking Place Order, you accept and agree to all SUBMIT MY ORDER 
terms of Apple's Sales & Refund Policy and Apple's 


Privacy Policy 

















— 





| Help | | Contact Us | 





2-11 核对 表单 : Apple 和 Zappos 应 用 


Ya 








把 提升 速度 、 效 率 和 证 用 户 放心 作为 设计 目标 。 去 掉 不 必要 的 输入 域 ， 减 
少 页 面 和 操作 步骤 。 





2.4 计算 表单 


计算 袁 类 的 应 用 ， 例 如 体重 跟踪 、 税 款 预 估 以 及 贷款 计算 右 ， 需 要 输入 信息 。 虽 然 
这 些 表 单 可 以 采用 常见 的 操作 和 布局 方式 ， 但 也 不 能 忽视 可 读 性 方面 的 基本 设计 原 
Wl] (LAI 2-12)。 

对 齐 方 式 、 标 签 、 字 体 、 按 钮 位 置 、 数 据 比 较 方式 、 色 彩 搭配 等 所 有 方面 都 影响 着 


移动 表单 的 可 用 性 。 例 如 ，Valspar Paint Calculator 应 用 的 输入 域 和 标签 排列 方式 就 
韭 常 合适 ， 它 的 可 读 性 比 Behr Paint Calculator 应 用 的 要 好 很 多 (OLA 2-13), 
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CardioTrainer 
NS previous | My Goal Next > 


My weight goal is 


MONDAY, APRIL 4, 2011 





in 10 weeks 十 


End date: Dec. 17 





j 





0.50 pound(s) per week 
0 0.5 1.0 TS 2.0 
Ambitious goal, average risk of failure. i 








2-12 常见 控制 方式 : CardioTrainer 和 WeightBot 应 用 








iPod > 9:18 PM 
Back valspar paint" sack Paint Calculator 


Select Measurements Units 


Enter the details of the room you wish to paint. 


Swee Medium, Large |, Custom 
small medium large 


or enter your room dimensions Room Length Doors [ 4/1 
ha | l 
Length of Room 0 ft Room Width Windows ap 


plan a project 





Interior Calculator 


Select a room size 





pe = oe No 
eight of Room 

et Need Touch Up Paint? | Yes | No 
# of doors 0 | 
# of windows 0 Calculate 





Cancel Calculate 











&J2-13 Valspar Paint 应 用 ， 吻 于 阅读 ; Behr Paint 应 用 ， 难 以 阅读 





最 好 的 计算 应 用 应 该 把 输入 数据 和 视觉 化 结果 紧密 关联 。TaxCaster FA Ml 5 (as tl wt 
化 地 显示 应 纳税 额 和 应 退税 额 ，HypoCalc 为 表单 配备 了 图 形 显示 (LA 2-14). 








iPod = 1:29 PM mm) 


Total ncome Your Pay & Withhol... 


About HypoCalc 


$177,234.74 
Details 


$59,243.03 
$16,148.85 
Your Refund: $0 


Good Market Average Market Bad Market 
3 a 


Investment Amount $40,000.00 


Your Taxable Wages 
0 3150k 
[ L l a 


Your Federal Tax Withholding Investment Period 


0 $35k 
LS i L [| 


Annual Return 


Your State Withholding 
0 
- Standard Devitation 


Your Unemployment Compensation 


"V d We recommend: 


O TurboTax. TurboTax Online Free Edition 


Initial Charge 





SAVE LOAD SEND 








2-14 TaxCaster 和 HypoCalc 应 用 
^ 使 用 标准 的 表单 设计 和 布局 原则 。 如 果 可 以 ， 在 同一 页 面 内 显示 计算 结果 ， 
位 置 尽量 明显 。 


2.5 搜索 表单 


某 些 搜索 功能 要 求 用 户 输入 多 个 约束 条 件 或 标准 ， 才 能 找 出 搜索 结果 。 与 其 他 表 
单 模式 一 样 ， 搜 索 表 单 也 应 该 只 包括 必要 的 输入 项 ， 并 提供 合理 的 默认 值 。 例 如 ， 
Kayak 应 用 的 飞机 航班 搜索 表单 默认 选项 是 ， 为 一 位 乘客 搜索 往返 的 经 谤 舱 机 票 。 
该 应 用 采用 了 稍 见 的 表单 布局 方式 ， 把 所 有 的 搜索 条 件 和 搜索 按钮 亚 示 在 一 个 屏幕 
Al. OpenTable 应 用 默认 定位 到 用 户 当 前 位 置 、 当 前 日 期 ， 搜 索 用 户 马 上 就 可 以 预 
定 的 餐馆 ( 见 图 2-15)。 
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10:28 PM 


Flights 


Round-trip 








i mo € © B A Hl C 4:27 om 





Find a Table 


LOCATION 


Current Location 


9 


DATE & TIME 
^ Austin, TX - Austin... — Los Angeles, CA Sat, Jun 4, 2011 | 7:00PM | 
DEPART RETURN PARTY SIZE 
MON WED 
图 21 wed >? E - 
MAX RESULTS 


Economy > 





40 60 80 100 


Find a Table 





Search Flights 








2-15 Kayak 和 Open Table 应 用 


Edmunds 的 Car Research 和 New Car Inventory 模块 的 搜索 功能 都 在 单 页 内 显示 ， 并 
且 都 在 搜索 完成 之 前 动态 显示 了 匹配 搜索 条 件 的 结 末 ( 见 图 2-16). 











5:36 PM 5:36 PM 


edmunds 


New Car Inventory 


Make/Model 
Vehicle Type 
Price Range 


Feature 


Location 


È 


Research 





ect search criteria 





Any > 
Any > 
Any > 
Any > 
78619 / 350 miles > 


-一 一 一 
Reset 


Make/Model 
Year 
Exterior Color 


Engine Type 


Price Range 


Location 


Show 544 Matches 


MINI 
Any 
Select Model 
Any > 
Any > 
78619 / 350 miles > 


E 
Reset 





Inventory 





2-16 Edmunds 8j New Car Research 和 New Car Inventory 模块 








Trulia 和 REALTOR.com 提供 了 相似 的 搜索 表单 ， 但 Trulia 的 界面 更 容易 操作 ， 也 
比 显 示 数 十 个 输入 域 的 REALTOR.com 更 具 亲 和 力 ( 见 图 2-17)。 





od = | X = 5:20 PM [ > 
Current Location 





vancel New Search Search 
For Sale For Rent | For Sale For Rent MLS ID 
Price range Min - Max > Location 
Property type All Types > City, State / ZIP / Address > 
Beds 0+ Nearby Areas None 
So 
Baths 0+ Basics 
eal Price Any 
Square footage 0+ ROM A E a CE S S Na 
Open house Price reduced li oom omn aR omm di 
OFF OFF 


Preview This Search 


Cancel Reset 





Search Now 





2-17 Trulia 的 精确 搜索 表单 和 REALTOR.com 的 长 表单 


不 要 让 太 多 的 搜索 选项 吓 到 用 户 ， 把 搜索 条 件 控制 在 一 页 之 内 。 采 用 能 够 
通过 手指 ， 方 便 且 快速 操作 的 控制 方式 。 








2.6 ”多 步骤 表单 


移动 设备 的 屏幕 较 小 ， 没 有 足够 的 物理 空间 ， 无 法 像 网 络 应 用 那样 显示 腾 肿 的 多 步 
又 表单 操作 向 导 。 一 个 人 简便 的 解决 办 法 症 ， 像 Fring 应 用 的 注册 流程 一 样 ， 显 示 当 
前 操作 步骤 和 总 步骤 数 〈( 见 图 2-18)。 


如 果 操 作 流 程 很 长 ， 就 多 加 几 个 步 又 表单 。 产 品 配置 颖 ， 如 Chipotle 的 在 线 订 购 模块 
和 Starbucks 的 饮料 创建 模块 ， 利 用 上 一 步 和 下 一 步 按钮 来 引导 用 户 ( 见 图 2-19)。 但 
这 种 方式 忽略 了 导航 设计 的 基本 可 用 性 原则 : 让 用 户 知 道 自己 在 哪里 ， 将 要 往 哪 里 
去 (也 就 是 位 于 第 x 步 ， 总 步 数 为 y 步 )。 清 晰 的 导航 对 移动 表单 尤为 重要 ， 因 为 用 
户 使 用 移动 设备 时 被 打 断 或 走神 的 概率 更 高 。 














表单 | 43 








Create Account 1 of 2 Create Profile 2 of 2 


fring! Free video calls, calls & chats Create your fring profile 
from your mobile. 


Add photo 
User-ID and Password must contain between 
4-15 letters & numbers. User-ID must start - 
with a letter. Vv | I agree to receive priodical updates 


w Allow fring to look trough my address 
—* — book & add friends 


— 














10:38 AM iPod = -5 1:10 AM 


Fill it Drink Detail Drink Size 


Rice 


Fajitas 
$ 


Pinto Beans 
$ 


© 1x Black Beans 
$ 


Salsa 


Fresh Tomato (mild) 
: © 


Roasted Chili-... 


Drinks 














2-19 Chipotle 和 Starbucks 应 用 





TurboTax 的 SnapTax 应 用 是 个 不 错 的 设计 ， 它 在 一 个 页 面 内 显示 所 有 步骤 和 提交 按 
钮 〈 见 图 2-20)。 用 户 可 以 进入 每 个 步 又 完成 操作 。 这 种 单 页 显示 的 方式 提供 了 极 





具 价 值 的 导航 信 Fi ( 整 
交 表 单 前 需要 付出 双 倍 的 努力 才能 检查 


& A LEE EJ socialis 


还 有 2 步 需要 完成 )， 
给 出 的 简要 总 结 。 


但 使 得 用 户 在 提 





iPod = 2:14 PM 


TurboTax 7 SnapTax 


Fed Refund 


$O 


Tax Forms 
0 forms added 


Tax Forms 


Income From a Job (W-2) 


© add new W-2 


Interest Income (1099-INT) 


Q3) add new 1099-INT 





A My Info 


) not visited 


Unemployment Income (1099-G) 


中 add new 1099-G 





Preview 
not visited 


© 





2-20 TurboTax 的 Snap Tax 应 用 


Square Jv HERAK Ja ios SRA GERIT) 


和 用 户 当 前 所 在 的 步 又 ( 见 图 2-21). 


| Purchase & File | 





Student Loan Interest (1098-E) 


中 add new 1098-E 


Other Forms 


PERE tan Ae. Dll uh SRB 





iPod 到 3 6:57 PM 
Enter Information 


= 


Cancel 


Accept Card Payments 


Before you can accept card payments, 
Square has to collect some information. 


Are you an individual or a business? 





6:58 PM 


Confirm Information 
cM 





= — MÀ 
i — — 
IT identity Information S= 
Theresa Neil 
xxx-xx-8985 
March 9, 1977 
18201 Fm 150 W 





Driftwood, TX 78619 











Confirm Information 





If the above information is accurate, we will 
ask three questions to verify your identity. 























first name | Theresa 
lastname | Neil 
Å 
4 a 
phone (000) 000-0000 
iN 
^x 
| addanan Cetrant AAArace 


4 Continue 








2-21 Square 应 用 的 安装 流程 





45 








告知 用 户 当 前 所 在 的 位 置 和 将 要 去 的 地 方 。 去 掉 不 必要 的 输入 域 ， 最 小 化 
页 和 面 和 操作 步 又 的 数量 。 





2.7 ”长 表单 


未 些 表 单 可 能 会 需要 滚动 屏幕 才能 训 览 完 。 长 表单 的 最 精妙 之 处 在 于 ， 它 用 命令 取 
代 了 按钮 。Zappos 和 Skype 都 在 iOS 版 本 的 应 用 中 采用 TMLee, 把 按钮 放 
在 了 标题 栏 内 ( 见 图 2-22), 











iPod = 10:32 AM = iPod 全 6:55 PM rm 

ADD PAYMENT ES Create Account 

CREDIT CARD INFORMATION: Full Name 
| Skype Name Requirec 

l 11] | | ] > 
| Password 
| Repeat 
xpiral )7 > P 
piration year ? Email 
BILLING ADDRESS: You must enter a valid email address in case 


you need to recover a lost password. 


Get news and offers ETE 











2-22 KRÆ: Zappos 和 Skype 应 用 


这 种 形式 在 其 他 操作 系统 中 都 是 非 标准 化 形式 ， 但 把 按钮 放 在 表单 的 底部 也 很 有 效 
( 见 图 2-23), 


沿用 最 好 的 表单 设计 经 验 ， 遵 循 特定 操作 系统 的 按钮 排列 顺序 和 排列 准则 。 
Discover Card 应 用 内 的 命令 按钮 和 取消 按钮 拥有 不 同 的 视 完 效 末 ， 但 在 iOS 系统 
中 的 顺序 却 错 了 。Sam’s Club 应 用 的 按钮 顺序 是 正确 的 ， 但 按钮 看 起 来 长 得 都 差 不 
多 ， 用 户 必 须 仔细 查 看 才能 作出 正确 的 选择 。 











28 50 E UG o» 

















Checkout 
First Name Theresa 
Last Name Neil 
Listing Title Card Number 
r - MLE | “expiration [一同 [一同 


a$ 
LJ 


C ory 
v ww ww 9 9 Billing Address 


DA Sheek Ona 
9 Add Peres Service > (me an 


一 一 一 





Place Order 








2-23 eBay 的 长 列表 表单 和 Gilt 的 长 核对 表单 


12:28 PM 
UEM Your —" 
bile phone must accept text messages. 








* First Name 
Amount: 
Middle Initial 
0.00 Limit $200 a day, $500 th Fe o 
$ imi a day a mon V Fast Msi — 
You'll earn Cashback Bonus on this transaction! 
om CD 
| See ———— 1 À 
Transaction Type: * Membership # Membership + 


’ OTC" 
Friends or Family M * Zip Code l 


Free for you and recipient 


, Online Profile a 
Note to Recipient (optional): * E-mail Address l E-mail Address | 
* Password P ' 
* Confirm | firm I vord 





SEEN 
Continue Cancel ^ r 
| & 


My Account 








图 2-24 ”Discover， 设 计 良 好 但 顺序 错误 Sam’s Club, foaleilE Big el 


不 要 人 为 地 把 表单 划分 成 一 些 步 又 来 避免 屏 硕 的 滚动。 坚决 要 去 挥 那 些 不 
必要 的 输入 域 。 尊 人 循 特 定 操作 系统 中 按钮 布局 的 标准 。 











eB 3 = 





表格 和 列表 





常见 表格 模式 : 基本 表格 (Basic Table)、 无 表 头 表格 (Headerless Table), 417 
组 表格 (Grouped Row)、 固 定 列 表格 (Fixed Column)、 级 联 式 列表 (Cascading 
List) 、 可 编辑 表格 (Editable Table)、 带 有 视觉 指示 器 的 表格 (Tables with Visual 
Indicator). 、 带 有 内 容 总 览 和 数据 的 表格 (Overview plus Data) 等 。 


我 们 的 很 多 客户 都 有 企业 应 用 程序 或 是 耐用 且 高 产 的 工具 ， 这 些 程序 和 工具 通常 都 
包括 填 满 了 数据 的 表格 。 我 们 可 以 把 表格 认为 是 几 十 个 模 、 纵 向 滚动 的 数据 列 。 客 
户 想 知道 的 是 ， 我 们 是 如 何 把 这 些 表格 塞 进 他 们 的 移动 应 用 中 的 。 当 然 ， 我 们 并 没 
有 那么 做 ， 至 少 设 有 采用 设计 网 站 时 处 理 表 格 的 方式 。 然 而 ， 庆 和 镁 的 征 ， 移 动 设备 
为 我 们 带 来 了 一 个 机 会 ， 可 以 重新 评估 哪些 信息 最 为 重要 ， 需 要 将 其 显示 给 用 户 。 


例如 ， 对 于 一 个 很 长 ， 用 以 显示 学 生 测 试 成 绩 的 表格 而 言 ， 图 表 或 许 才 古 上 佳之 选 。 
这 样 你 就 能 从 所 有 学 生 中 找 出 那些 位 于 钟 形 曲 线 某 个 特定 区 域 的 学 生 〈 见 图 3-1)。 








2011 Test Scores 
Name Score | Test Date | 





























Amy | 77 | 07/14/2011 | 

Bob 84 | 06/23/2011 

Chris | 95 | 07/14/2011 | 二 
Daniel | 80 | 06/23/2011 ] 2011 Test Scores alh -— 
Elza | 64 | 08/10/2011 | 

Frank 81 | 06/23/2011 | 

Gene | 92 | 06/23/2011 | 

Holly 67 | 07/14/2011 | 

| Ivan | 79 [07/14/2011 | 

Kristen | 83 | 06/23/2011 | 

Lois 99 | 06/23/2011 | 

Mandy 100 | 06/23/2011 














3-1 重新 设计 后 的 表格 
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BAB th SP THAR, EEA A oy AN Te a EAT VAT RER AT EHE 
的 成 绩 ， 这 是 另外 一 种 显示 方式 ( 见 图 3-2). 








2011 Test Scores 2011 Test Scores 
Q start typing to search 


Amy Damien A- 
Test date: 08/10/2011 77 of 100 Test date: 08/10/2011 94 of 100 


Bob B- Damon 
Test date: 07/14/2011 84 of 100 Test date: 07/14/2011 78 of 100 


Chris A Daniel C 
Test date: 06/23/2011 95 of 100 Test date: 06/23/2011 80 of 100 


Daniel C Danny B+ 
Test date: 08/01/2011 80 of 100 Test date: 08/01/2011 93 of 100 


Eliza E Daphane + 
Test date: 08/01/2011 64 of 100 Test date: 08/01/2011 99 of 100 

















3-2 钟 形 曲线 图 表 的 另 一 种 钢 图 


如 采 你 已 经 确定 了 应 用 所 要 显示 的 关键 数据 ， 束 可 以 参考 图 3-3 中 的 表格 模式 寻找 
设计 灵感 。 








$300000 A 
LA AG ARK AH 行 分 组 表格 8x 5 E46 
| 

il 

il 

i 

i Ea 

i 

ii 

iJ 

ill 
带 有 内 容 总 览 和 数据 «RAN 带 有 视觉 指示 器 的 “可 编辑 表格 
(9 2.18 LAE 








3-3” 弟 见 表格 模式 








3.1 基本 表格 


这 是 表格 的 标准 模式 ， 其 中 的 列 数 据 有 固定 的 表 头 ， 表 格 至 网 格式 布局 。 为 表 内 的 
行 设 定 不 同 的 颜色 (这 种 形式 也 称 为 斑马 纹 )， 或 者 在 各 行 之 间 用 细 线 分 割 ， 都 能 提 
升 表格 的 可 读 性 (ILE 3-4)。 





iPod = 4:32 PM 


Back Product Analysis 
2009 Q4 Atlanta 


Subcategory Sales 


8" Video Equipment $17,557 Graphs Box score Plays CG 





[^g Cameras $14,921 Friday, August 14, 2009 





" BO PA H 2B 3B HR R RBI SB BB SO WPA 
A Soriano (LF) 
J Baker (1B-2B) 


Cy Tv's $14,200 


[B Audio Equipment $11,636 
K Hill (C) 


G Soto (PH) 
R Wells (P) 


Computers $7,644 


ss Science & 
Technology 


Pitcher 
R Wells (W) 
J Grabow 
E Caridad 


$3,181 


Rock 32,087 











3-4 MicroStrategy Mobile 和 FanGraphs Baseball 应 用 




















fe Vs] SE. zs BJ AR A A ES. CADRE E ELA BERE LIS AER. TOR 
用 其 他 方式 。 


3.2 无 表 头 表格 


无 表 头 表格 的 特征 是 一 一 没有 列 标签 ， 用 较 宽 的 行 显示 某 一 对 象 的 多 项 信息 。 通 第 
的 做 法 是 ， 用 较 大 的 字号 显示 行 标记 ， 用 较 小 的 字号 显示 细 市 内 容 。realtor.com 网 
站 的 设计 显示 出 了 这 类 较 宽 的 行 可 容纳 内 容 的 极限 。 它 们 本 应 该 省 略 挥 见 余 的 住宅 
2&7" (Single Family 被 截断 显示 为 “Single..” 和 “Single Fam..”) 描述 ， 因 为 表格 
上 面 的 标题 已 明确 显示 了 这 一 信息 ( 见 图 3-5). 





£a 
3. 


不 要 使 用 暗色 的 网 格 线 和 垂直 分 割 方式 。 文 字 左 对 齐 ， 数 字 右 对 齐 。 一 屏 
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iPod = = 5:21 PM LN, 


Home Results (2235) Refine 


ga M @ 9:19 am 


e 


Bankof America ^2 Sign Out 
| 


2 NEP 


Accounts 


Austin, TX 
$200,000 to $450,000 | Single Family Homes... 





Bank Accounts 


112 Oak Glen Cv Lakeway, TX 
Interest Checking - 6523 


EP $450,000 | 3 Bed, 2.5 Bath Y $1,209.22 > 
M 2,314 Sq Ft | 6,098 Sq Ft Lot | Single... Available Balance 
G 10600 Leafwood Ln Austin, TX — Regular Savings - 7689 $3,232.17 > 


Available Balance 


Be $450,000 | 4 Bed, 2.5 Bath 
2,378 Sq Ft 2.16 Acres | Single Fam... 





BAC Corporate Card Business 
Visa - 2231 $1,221.96 k 


ji I 
ü Current Balance 
A 


4L. 1203 Holly St Austin, Tx 
$450,000 | 3 Bed, 2 Bath 
2.142 Sq Ft | 4,791 SqFt Lot | Single.. 









Money Market Savings - 7122 
| 901 Bermuda Lakeway, Tx Available Balance $6 /95.92. P 
$450,000 | 4 Bed, 3 Bath 


3,185 Sq Ft | 0.27 A Single Fam... 
4 e iota cun Bank of America Platinum Plus 


MasterCard - 6511 $232.33 F 


Current Balance 


29 312 Calistoga Ct Austin, Tx 
$450,000 | 5 Bed, 4 Bath 






Merrill Lynch Investment Accounts 
Map Satellite 
CMA-EDGE 1A1-87AB? £10223 46 M 











3-5 REALTOR.com 和 Bank of America 应 用 


这 种 表格 模式 非常 适合 用 来 显示 项 目 集 合 CE i, EHE. FASE) 和 这 些 项 
的 搜索 结果 。 与 列表 类 似 ， 这 种 形式 能 方便 用 户 快 速 浏 览 选 择 。 


每 一 宽 行 内 最 多 显示 三 行 信息 。 不 太 重 要 的 细 市 内 容 使 用 较 小 、 浅 色 的 字 
体 。 不 要 自己 猿 测 什么 信息 最 重要 ， 而 要 询问 客户 的 意见 ， 然 后 作出 行 之 
有 效 的 设计 。 


3.3 固定 列表 格 的 表格 


对 于 较 大 的 表格 ， 固 定 某 一 列 或 某 几 列 是 个 可 行 的 做 法 〈 见 图 3-6). LA Roambi 应 
用 为 例 ， 最 左边 的 一 列 固定 ， 其 他 列 深 动 显示 。Fidelity 应 用 则 同时 固定 了 屏幕 左边 
和 右边 的 列 ， 在 中 间 区 域 深 动 显示 内 容 ， 但 这 种 模式 比 Roambi 所 用 方案 难以 使 用 ， 
因为 用 户 可 以 执行 请 动 操 作 的 区 域 过 小 。 











邮 








ao fI PI AS «T EET 10:51 am 


Eid —— Log Out 


© Top 25 Accounts 


YTD Orders Number Discount 


Account of Ord... 


Airware 





Accounts. 


Alucal al $12,37 4g 36.00% INDIVIDUAL 


Aminfotel | $14,183 oe 6.00% $ 


Calscope 913,783 ae 36.00% As of 06/04/2011 01:46pm ET 





Comiom at ; 
Positions Balances Orders History P 











Conofarb 
Datacor Symbol Last Price Change 
Dataweb FNIXX 
Ensys al $13,238 26 39.00% NJ MUNICIP... 

io CVX (m) 
Genetion  HEURON v : "uc > 
iCineplexon CORP NEW 

-CWA 11061EC1..- 

iMotocar 212,046 EX CHEN %5 CALL "Y $ -$5. 00 > 
iRapitopia (CVX) CHEV... 
Jambancorp al $14,756 50 30.00% As of 06/04/2011 10:50am ET 


Pa uns Additional Important Information 








3-6 Roambi 40 Fidelity 应 用 (Pia KIAR 
ut 为 国定 的 列 设计 比较 醒目 的 样式 ， 以 提示 用 户 ， 滑 动 操作 能 浏览 更 多 的 
数据。 


NE 
nj 
> 1 
< 


3.4 ”市 有 内 容 总 览 和 数据 的 表格 


帘 有 内 容 总 上 和 数据 的 表格 模式 指 在 表格 各 数据 行 上 方 显 示 表 格 内 容 的 总 换 。 我 最 喜 
欢 的 网 络 应 用 程序 一 一 Discover 的 SpendAnalyzer 就 采用 了 这 种 模式 (UL 3-7). 


移动 应 用 ， 如 Bank of America 应 用 的 账户 页 面 中 ， 存 款 账 户 的 可 用 余额 (总 览 ) 

就 以 大 号 字体 在 账户 的 详细 信息 (数据) 上 方 显 示 。 在 另 一 个 NASDAQ.com 的 例 

Tn. PNE A pel ZE Ee E73, KERER DU V, ee PP dc ox fei EL AY [8] ET ach Be TEE E 
汇总 数据 〈 见 图 3-8). 














注 1: 参见 https://www.discover.com/credit-cards/member-benefits/spend-analyzer/, (EHIE) 





表格 和 列表 | 55 





All Category Spending: Oct 1-31, 2008 


ELM 3 mo. 6 mo. 12 mo. 24 mo. Year-to-Date Oct 1-31, 2008 | 4 


All Categories $1,090 


All Categories Spending History 


Avg. Spend 广 一 一 二 一 一 一 天 一 一 一 一 一 一 一 一 一 一 


Bi Merchandise/Retail $63 $0 u 





E Supermarkets $301 

: TOM ] Mar Apr May Jun Jul Aug Sep Oct 
E Medical Services $284 @ Gasoline $61 '08 '08 ‘08 '08 ‘08 ‘08 '08 '08 
B Services $229 @ Restaurants $57 ~ | 
E Automotive $95 a 


Avg. Monthly Spend (24 mo.) - - - $ 





D 
Year-to-Date Total $ 
Last 12 Months Total $ 14,827 
Last 24 Months Total $ 28 


Like what you see, but don't have a Discover Card? Apply Now > 


— Transactions Text Size ESI AJ|A 
Trans.Date 4 PostDate Description Amount X Category 
10/04/08 10/04/08 BP OIL $ 29.00 Gasoline ^ 
10/08/08 10/08/08 ALLSTATE INSURANCE $ 21.40 Services | | 
10/08/08 10/08/08 WALGREENS $ 38.00 Merchandise/Retail | 
10/10/08 10/10/08 BP OIL $ 32.00 Gasoline 
10/10/08 10/10/08 TURBO TIRE AND AUTO INC. $ 95.00 Automotive 
10/11/08 10/11/08 MEDSUPPLIES $ 90.00 Medical Services | 
10/15/08 10/15/08 WHOLEFOODS $ 124.00 Supermarkets 
10/16/08 10/16/08 DR. JULIUS HIBBERT $ 194.00 Medical Services 

















3-7 Discover 网 站 的 SpendAnalyzer 






Portfolio 


Accounts Regular Savi. - Sign Out 
Available Balance 


$12,289.25 0 


Processing 
TRANSFER FROM ACCT #7164 ON $500.00 > 
02/14 VIA WEB 





02/10/2011 


$0.80 > 
Interest Earned 


02/09/2011 
Online scheduled transfer from CHK 51.11 2 
7164 Confirmation# 1135962700 


02/09/201 1 
Online scheduled transfer from CHK $1.11 > 


Portfolio 


Accounts 











3-8 Bank of America 和 QFolio 应 用 


Adobe 的 Site Catalyst 用 图 形 做 总 结 ， 但 图 例 信 息 难 以 辨认 ， 所 以 要 改进 饼 状 图 的 
设计 。Proofpoint 应 用 在 这 一 点 做 得 很 好 ， 它 为 图 例 加 上 了 数据 ( 见 图 3-9). 











X &T 3G 8:01 PM 


pee roofpointdemo_demo2 
JJ Esquire CSBU Demo usters e p 


一 Message Disposition 
Exit Pages 
Thu. 7 Oct. 2010 


Legend 


Messages Percentage 
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表格 内 容 总 贤 应 该 显示 在 数据 上 方 ， 且 要 一 目 『 了 然 。 





3.5 ” 行 分 组 表格 


对 表格 的 行进 行 分 组 能 让 用 户 更 容易 地 了 解 表 格 内 的 数据 。 行 分 组 的 作用 类 似 于 各 
个 部 分 的 标题 ， 比 如 在 Mint 应 用 中 ， 交 易 记 录 按 照 日 期 进行 分 组 ( 见 图 3-10). 
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在 表格 中 为 内 容 总 结 行 设 定 与 其 他 行 不 同 的 视觉 效果 。 





3.6 级 联 式 列表 


很 明显 ， 在 手机 屏 奏 上 显示 树 形 表格 非 闸 及 烦 ， 级 联 式 列表 可 以 提供 同样 的 层级 结 
构 。Wine Spectator 中 的 级 联 式 列表 可 以 让 用 户 很 容易 地 在 酒 的 产地 、 类 型 和 年 份 
之 间 进 行 导航 ( 见 图 3-11)。 
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3-11 WineSpectator 应 用 


iOS Fh i RI Ft OR A REUS, Ese Ph ESAT POA BJ UI ZU. 
DropBox 应 用 在 名 为 DropBox 的 选项 卡 内 使 用 这 种 形式 作为 次 级 导航 (ILE 3-12). 
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如 有 果 用 级 联 式 列表 来 导航 用 户 自 定义 的 信息 结构 ， 则 可 
多 界面 层次 。 


p RE te n 

3.7 ”市 有 视 锅 指示 器 的 表格 
火花 谱 线 (Sparkline) 和 图 标 能 提升 表格 的 信息 显示 效果 ， 可 以 让 用 户 更 容易 地 找 
到 自己 所 关注 的 内 容 。My Diet Calendar 用 带 有 颜色 的 箭头 来 显示 净 热 量 摄 取 高 于 
或 低 于 用 户 所 期 望 日 摄 入 量 的 情况 。Roambi 的 Sales by Store 模块 的 表格 用 火花 谱 
线 和 图 标 显 示 月 销售 量 和 销售 走势 ( 见 图 3-13). 


次 (多 于 3 层 )。 
无 法 避免 产生 很 
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3-13 My Diet Calendar 和 Roambi 应 用 


更 多 关于 移动 应 用 中 火化 谱 线 的 内 容 ， 参 见 第 6 草 。 





使 用 那些 用 户 能 够 迅速 识别 的 视 完 化 指示 副 ， 去 挥 那些 不 必要 的 图 标 。 
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3.8 可 编辑 表格 


在 移动 应 用 界面 中 ， 可 编辑 表格 广泛 应 用 于 诸如 QuickOffice 之 类 的 电子 表格 软件 
( 见 图 3-14) 。 网 络 应 用 中 可 编辑 表格 的 很 多 设计 原则 都 可 用 于 移动 终端 的 界面 设计 : 
。 清晰 地 显示 出 当前 所 选择 的 单元 格 和 /或 行 ; 
。 如 果 单 元 格 有 特定 的 格式 ， 提 供 对 应 的 编辑 器 (UE ZS. UA HI, BC. 
wea, BALE as GG ) 5 
。 在 用 户 执行 保存 操作 时 显示 反馈 和 错误 信息 ， 而 不 是 在 更 改 表格 时 显示 。 
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3-14 Android 系统 下 的 QuickOffice 和 Windows 系统 下 的 SmartGrid 


与 网 络 应 用 不 同 的 是 ， 移 动 设备 上 的 可 编辑 表格 不 适合 用 来 输入 大 量 数 据 ， 因 为 大 
部 分 移动 设备 的 键盘 都 不 支持 键盘 导航 (尤其 是 基于 Tab 键 的 切换 操作 )。 





网 络 程序 和 桌面 应 用 程序 设计 之 间 的 权衡 为 可 编辑 表格 提供 了 丰富 的 可 参 
考 经 验 。 不 要 为 大 量 数 据 输入 使 用 可 编辑 表格 ， 当 需要 有 大 量 可 编辑 元 素 
时 ， 也 不 要 使 用 这 种 表格 模式 。 
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搜索 v 分 类 和 过 小 


S 


常见 模式 : 显 性 搜索 (Explicit Search) 、 目 动 补 全 搜索 (Auto-complete). 、 范 围 搜索 
(Scoped Search)、 保 存 搜索 记录 并 显示 最 近 搜 索 内 容 (Saved & Recent), 、 搜 索 标 准 
(RA) (Search Criteria (form))、 搜 索 结果 (Search Result)、 屏 内 分 类 (Onscreen 
Sort ) 、 A RTE AP A EF ot (Sort Order Selector), 472272" (Sort Form), BRA tye 
(Onscreen filter), tue zy (Filter Drawer), xlJEXHWfE (Filter Dialog). IWEK 
单 (Filter Form), 





MAAK, 4IRERT TEARS. 快速 地 翻阅 着 几 份 杂乱 的 报纸 时 ， 我 突然 

FARES, AERA MA a J^ us EE L 备 的 三 个 简单 特征 : fH. A EDU LUE 
来 查找 信息 的 。 

A el Gi dd i E 分 组 的 (如 卡车 、 面 包车 、SUV 
T), "LC 页 的 列表 列 出 所 售卖 的 产 
品 。 我 必须 陪读 报纸 上 的 每 一 条 ， 才 能 确定 是 否 有 人 正在 出 售 我 想 买 的 东西 。 
^, WII 我 会 使 用 手机 上 的 ase s List 应 用 。 

这 使 我 隐 入 了 思 芳 。 当 我 们 在 数字 世界 中 搜索 、 分 类 并 过 契 信 息 时 ， 移 动 应 用 中 总 
是 发 生 着 细微 的 变化 ， 来 帮 有 我 们 实现 这 些 操作 。 本 章 介 绍 一 些 在 移动 应 用 中 搜索 、 
分 类 并 过 让 信息 的 方法 。 


4.1 搜索 


Peter Morville 和 Jeffery Callendar 在 Search Patterns: Design for Discovery (O’Reilly 
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出 版 社 2010 4E HK, http://shop.oreilly.com/product/9780596802288.do) “一 书 中 对 
搜索 的 设计 模式 作出 了 精彩 总 结 。 我 强烈 建议 读者 在 设计 搜索 界面 之 前 (无 论 是 为 
移动 设备 还 是 为 其 他 平台 )， 先 阅读 一 下 这 部 著作 。 


在 这 一 部 分 ， 我 将 介绍 一 些 移 动 应 用 的 搜索 模式 ( 见 图 4-1)。 








显 性 搜索 自动 补 爹 搜索 动态 搜索 范围 搜索 
Search 
ve arche 2 
PRE Show 100 Results Show More 
保存 搜索 记录 并 显示 最 近 REARS 搜索 结果 
搜索 内 容 








图 4-1 弟 见 搜索 模式 


41.1 显 性 搜索 

显 性 搜索 要 求 用 户 执 行 明显 的 搜索 操作 并 讲 览 搜索 结果 。 其 操作 方式 可 以 是 点 击 屏 
幕 上 的 搜索 按钮 ， 如 Walmart 的 设计 ( 见 图 4-2)， 或 是 按 下 键盘 上 的 搜索 键 ， 如 
Target 的 设计 ( 见 图 4-3)。 搜 索 结 末 通 常 显示 在 搜索 栏 下 方 。 建 议 为 显 性 搜索 搭配 


目 动 补 全 模式 .。 








注 1: 该 书 中 文 版 名 为 《搜索 模式 》，2010 年 由 电子 工业 出 版 社 出 版 发 行 。( 译 者 注 ) 
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图 4-3 Target， 载 入 并 显示 搜索 结果 
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在 输入 域 周围 提供 明显 的 操作 按钮 ， 并 提供 撤销 搜索 的 选项 。 通 过 反馈 告 
4. 知 用 户 ， 搜 索 动作 已 执行 (参见 第 8 F). 





41.2 BH Ef e ER 

或 许 网 络 应 用 和 移动 应 用 使 用 最 广泛 的 搜索 模式 就 是 自动 补 全 模式 。 用 户 输入 内 容 
时 程序 会 立刻 显示 出 一 系列 可 能 的 输入 结果 ， 只 要 通过 点 击 来 选择 某 一 项 ， 程 序 就 
会 执行 搜索 操作 。 另 外 一 种 情况 是 ， 用 户 持续 输入 内 容 ， 然 后 点 击 搜索 按钮 。 


理想 状况 下 ， 搜 索 结 果 将 立刻 显示 出 来 ， 但 要 使 用 进度 指示 颖 (搜索 中 …… ) 作为 
系统 的 反馈 。Netflix ( 见 图 4-4) 在 搜索 输入 域内 显示 了 一 个 指示 妖 ， 而 Fidelity 
( 见 图 4-5) 则 在 搜索 结果 显示 区 域内 设计 了 一 个 指示 絮 。 


Tripadvisor 应 用 采用 了 增强 的 自动 补 全 搜索 ， 把 搜索 结果 分 为 三 组 : 受 欢 迎 的 旅游 
目的 地 、 酒 店 和 餐馆 ( 见 图 4-6). 
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4-5 Fidelity 应 用 
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4-6 Tripadvisor 应 用 
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如 果 程 序 在 显示 搜索 结果 时 有 延迟 ， 就 要 给 出 一 些 反 馈 。 在 搜索 结果 中 突 
出 显示 用 户 输入 的 搜索 内 容 。 





4.1.3 动态 搜索 

这 种 模式 也 被 称 为 动态 过 滤 。 用 户 输 入 搜索 内 容 ， 程 序 将 动态 地 过 滤 屏 幕 上 的 数据 。 
在 BlackBerry 系统 下 的 App World 应 用 和 WebOS 系统 下 的 People 应 用 中 ， 用 户 输 
入 文字 ， 程 序 会 过 滤 屏 幕 上 列 出 的 内 容 项 (WE 4-7), 
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^ 对 于 有 限 的 数据 ， 如 地 址 薄 或 个 人 媒体 库 ， 这 种 搜索 模式 非常 有 效 ， 但 它 
不 太 适合 用 来 搜索 海量 数据 。 

4.1.4 HBR 

il. (EDS xmILBL HoE R RREME E. ER Re x F 

想 要 的 结果 。Google 和 Photobucket 使 用 了 不 同 的 设计 ， 却 达到 了 相同 的 搜索 效果 

(ULI 4-8), 
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4-8 Google 和 Photobucket 应 用 


AllRecipes MHE 70 VE HF (ETE 2018 BZ BEE PETE AR ART (SEES). Dropbox 
SUAS 80 A5 18 Ae A aA AS, BH P AE ERR A ZZ PT ARE 
Fal Se Ey RK EK (ULI 4-9), 
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4-9 AllRecipes 和 DropBox 应 用 
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. 单 实现 高 级 搜索 功能 


4.1.5 ”保存 搜索 记录 并 显示 最 近 搜 索 内 容 

成 功 的 移动 应 用 界面 设计 都 遵循 基本 的 可 用 性 原则 ， 尊重 用户 的 劳动 成 果 。 保 存 搜 
索 记 录 并 显示 最 近 搜 索 内 容 的 设计 做 到 了 这 一 点 。 有 了 这 样 的 设计 ， 用 户 就 可 以 很 
容易 地 从 先前 的 搜索 内 容 中 进行 选择 ， 而 不 需要 再 次 输入 相同 的 关键 词 或 搜索 条 件 。 
eBay 和 蕴 果 iOS 都 保存 了 搜索 记录 ， 也 通过 显示 最 近 搜 索 内 容 来 提升 用 户 的 工作 
效率 (ULE 4-10), 
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4-10 eBay X) Walmart 应 用 











其 他 尊重 用 户 劳 动 成 果 的 做 法 包括 基于 地 理 位 置 的 搜索 ， 如 Trulia 的 设计 ; 或 基于 
条 形 码 的 搜索 ， 如 Amazon 的 PriceCheck 应 用 (UL 4-11), 





保存 搜索 记录 通 背 要 执行 额外 的 步骤 来 为 搜索 命名 ， 以 供 后 用 ， 显 示 最 近 
搜索 内 容 的 做 法 对 搜索 记录 的 保存 比较 模糊 ， 且 和 序 于 表面 。 你 应 该 考虑 哪 
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4-11 Trulia 和 Amazon 的 PriceCheck 应 用 








41.6 ”搜索 表单 

这 种 搜索 模式 的 特征 是 ， 在 一 个 独立 表单 内 输入 多 项 搜索 条 件 和 一 个 显 性 的 搜索 
tHo Kayak 和 Whole Foods 都 用 搜索 表单 来 收集 搜索 航班 和 酒店 所 需 的 条 件 (L 
图 4-12 和 图 4-13) 。 更 多 例子 ， 参 见 第 2 ee, 
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4-12 Kayak 应 用 
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Category Category All v 


Special Diets Special Diets All v 


Search 


Search ze 
Beverages 


Breakfast and Brunch 
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Rt a> dg A BR Bae. ARE EER TE ZR Se EE ST A Pe ttl], BSG ie 
直 的 表单 设计 案例 OOF AK, tree. KTE), AUG. 





E 
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4.1.7 搜索 结果 /浏览 结果 

只 要 执行 了 搜索 操作 ， 那 么 就 要 在 同一 屏 内 显示 搜索 结果 ， 或 在 专用 的 屏幕 内 显示 。 
搜索 结果 可 以 显示 为 表格 或 列表 ， 也 可 以 在 地 图 或 卫星 上 显示 ， 或 者 显示 为 缩 略 图 。 
根据 搜索 结果 的 类 型 和 用 户 使 用 偏好 提供 多 种 视图 ( 见 图 4-14 和 图 4-15)。 
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Shell KM 0.65 
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; ^ Vn d n 
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42 mwood à 0 
$2463 SA Continental üs The Parker Pool KM 1.04 
12/05 AUS 7:04p* GIG 11:10a O 12/4 «^1? Near 3901-4089 Lake TralDr — & 0 
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HOME!! David Drive KM 0.99 

i 2 Near Page Dr 

$2470 © Multiple Airlines repe 4 0 
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Abs) 94. pa o: s Q; apa 6:12PM 
E Featured Q 
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X XXX tree KRAKI installed 


Fieldrunne... Be Spring Zen 
bat ' "4 Free 
Jolie $2.99 Jk Free 
WorldMate Vlingo 

WorldMat Virtual Ass... 
keke Free kkkt i Free 
Te Buildings Stardunk 
Xv 9x0 *& Free k**kk* Free 











E] 4-15 在 地 图 上 显示 搜索 结果 和 显示 搜索 结果 的 纺 略 图 


延 述 加 载 古 一 种 第 用 技术 ， 它 可 以 在 加 载 其 他 搜索 结果 的 同时 显示 当前 已 找到 
的 结果 ， 参 见 Ebay Motors 和 BestBuy 应 用 ( 见 图 4-16)。 在 屏幕 已 显示 满 内 容 
时 ， 大 部 分 应 用 的 做 法 是 ， 提 供 一 个 “查看 更 多 结果 ”的 按钮 ， 或 者 自动 加 载 更 多 
结果 。 





mele BY 7:30 PM 





Gnog BUM e 1:20» 


Search Results 
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220 items found 


yl " Www i & 34 $39.99 


Apple® Smart Cover for 
Apple® iPad 2 - Green 


AERAR $39.99 





Apple® Smart Cover for 
Apple® iPad® 2 - Navy 
www 2.8 $69.99 


Apple® Smart Cover for 
Apple® iPad® 2 - Orange 


请 富 言语 富 50 $39.99 





Loading more results... 
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AN BEG) VAR BER , HAIEN EAER hit EDU bE AY HEROS ELE. 


s¥ a 


" 标明 已 找到 搜索 结果 的 总 项 数 。 使 用 延迟 加 载 ， 而 不 是 分 页 显示 的 方式 。 
、。 设 定 一 种 合理 的 默认 分 类 模式 。 


4.2 分 类 

在 显示 搜索 结果 时 ， 选 择 一 种 合理 的 默认 分 类 方式 非常 重要 。 一 点 点 常识 加 上 用 户 
调查 就 足以 找 出 最 有 效 的 默认 分 类 模式 。 根 据 当 前 的 界面 设计 模式 选择 性 地 实现 其 
他 分 类 功能 ( 见 图 4-17) : 




















。 ENIX 
。 SREP CPE as 
。 分 类 表单 
| 
Option v Option Option sort by 
Most popular 
Recently popular 
Highest price 
Lowest price v 
Highest price me 
Lowest price A 
Newest 
Apply 
AASA SRA ABER 分 类 表单 











E] 4-17. RAAT 


4.2.1 屏 内 分 类 

如 果 所 要 分 类 项 很 少 ， 可 以 采用 屏 内 分 类 模式 ， 用 户 只 需 点 击 一 次 就 可 以 实现 分 类 排序 。 
根据 屏幕 内 其 他 界面 元 素 的 布局 ， 把 分 类 选项 放 在 屏幕 的 顶端 或 底部 (ILEI 4-18)。 

用 3 个 分 类 项 实现 4 种 分 类 方式 。 对 于 按照 价格 分 类 ， 为 用 户 提 供 2 种 选择 : 升序 
和 降序 。 

















santa monica, ca — Jul 19 to Jul 21, 2011 iPod = 3 12:14 AM 


Q santa monica, ca | c3 | Q Dwell E m" Cancel | 


i The Fairmont Miram... - Relevance Featured -— Price A 








y ` From Highly Rated = 
T T DwellStudio® for Target® Infant 
; dr ác dr o Ge alias Boy's Collection > 
: No Reviews $4.54 -... 
Good Nite Inn - Cala... Online Only 
se E. (i ~ DwellStudio® for Target® Boy's LS 
ee $53. Henley Bodysuit 2pk > 
P2344! 14.7 miles X oo e (1) $4.54 
3) Online Only 
| Ayres Hotel Manhatt... = DwellStudio® for Target® Little Dots 
9 m | Baby Bedding Collection x 
i $1 89.5 | eoe tok (3) $5.94 ae 
: d$ y 10.7 miles |®| Online Only 
Best Western Plus... | EE wn EE 
From | » 
s $1 93, | X dock e) $5.94 


m 


Popular 





以 明确 的 方式 告知 用 户 当前 采用 CEA 的 分 类 选项 。 如 打分 类 选项 无 法 
很 好 地 与 触发 侣 按钮 栏 融合 ， 芳 虑 使 用 分 类 排序 选择 堪 。 





4.2.2 RHP XE 

选择 器 模式 是 屏 内 分 类 的 良好 补充 。 很 多 UI 控 制 元 素 都 可 用 作 选 择 器 ， 但 要 考虑 
应 用 所 属 操 作 系 统 的 设计 原则 aan, Android 应 用 通常 用 菜单 作为 选择 器 ，iOS 应 
用 则 用 picker 控件 和 操作 表 作 为 选择 器 ) 。 


选项 标题 可 以 长 一 些 (更 加 明显 )， 也 可 以 显示 更 多 的 选项 。Walmart 把 分 类 按钮 放 
在 徘 近 搜索 区 域 的 位 置 ， 而 realtor.com 则 把 分 类 按钮 与 其 他 视图 选项 和 动作 放 在 一 
起 ( 见 图 4-19 和 图 4-20). 


如 采 要 面 同 所 有 操作 系统 ， 那 么 使 用 复 选 框 是 一 种 比较 向 便 的 方法 ， 如 Target 的 设 
ib; 也 可 以 使 用 基 浮 菜单 ， 如 Awesome Note 的 设计 ( 见 图 4-21), 
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Search Results 


662006 6 GW @ 11:16 


—————— ©) Sort by 
Q, Toys zl 


Intex 18' x 48" Easy-Set Above- Best Match 


! Ground Pool 
e LESE 
$299.00 . | 
Was: $349.00 Price: Low to High 


Intex Krystal Clear Saltwater 
Water Sanitizing System 
kkkh 

See Our Price 


List Price: $169.00 


Intex 15" x 48" Metal-Frame New 
Above-Ground Pool 
六 六 六 六 

$249.00 


Was: $299.00 






Price: High to Low 


Best Sellers 





Backyard Discovery Tucson 
Cedar Wooden Swing Set 


$399.00 


~ rf t.t = at 
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iPod 全 5:26 PM 
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Products 


€ <3 Hello 


March 2010 0 





160 Results 





TUE Description 


Awesome Note Description Finally, combin 
t Best Match nin 1 6 e Notes with To-dos in one app! Awesome No 





Tue Mar 16 4:31 PM * 
Graco Newborn Napper Pack n 
Play - Kinsey MON Sort By 
$134.99 online price i | p 
te te te te te (34 reviews) \ Date Modified 


Date Created 
Graco Newborn Napper Pack 
'n Play Playard - Lowery 


| = Name 
$134.99 , | 
PRK HH 030 reviews) . =@ Due Date 


wr Priority 


Graco SnugRide Infant 22 lbs 
_ A Adjustable Base - Tan 
edi) > ci o Descending Ascending 


$39.99 
Keke kt 125 reviews) 











4-21 Target 4] Awesome Note 应 用 


Va 
` 


TR DEERE RRA eih Tot AE RRE I RERS RDE, KEHAD ERIE 
系统 影响 的 界面 方案 。 要 清晰 地 向 用 户 表明 当前 采用 的 分 类 选项 。 


ux 
3 





423 ”分 类 表单 

很 多 应 用 都 把 分 类 和 过 滤 功 能 整合 在 一 屏 内 显示 ， 通 常 称 为 提炼 (Refine), KE 
最 为 有 效 的 分 类 模式 ， 它 要 求 用 户 打开 表单 ， 选 择 搜索 选项 ， 然 后 执行 选项 (点击 
“确定 ”或 “应 用 ”按钮 ， 见 图 4-22), 





s¥ a 


J TEE FA RZ B. MIAA 775 ABE He E. DAE R X HU a 
Ey 或 分 类 排序 选择 颖 。 
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iPod = 5:23 PM 


HA 201: O HA fi] G 8:49 om 


Back Refine Search Search 





Cancel Refine Search 





Search in location: Austin 


MINI Cooper 






Keywords 


Sort your results by: 








Category 

For sale > 
Distance - Nearest to Farthest | 

Price Range 

Optional > 


Distance - Farthest to Nearest 


Price - Highest to Lowest v 


Price - Lowest to Highest 


Year - Newest to Oldest 
Search 


4-22 cars.com 和 eBay classifieds 应 用 








4.3 过滤 


搜索 大 量 数据 还 要 求 执行 过 滤 操 作 ， 这 一 操作 也 被 称 为 提炼 。 过 滤 操 作 依 赖 于 用 户 
选择 的 ， 用 以 提炼 搜索 结 末 或 大 量 人 图 4-23 给 出 了 第 见 的 过 小 模式 。 














| 
Scope A Scope B Scope C xia 
— Criteria 
Criteria Criteria 
Criteria 
如 py 
各 py 

A AL CREB URAL T6 Hb LEAF 











图 4-23 ”常见 过 滤 模 式 





MRENA de D REI CEN, BEG BI AT ZA Ve EL TERR BK 


4.3.1 RENE 
BENDRE, BRA EE Sch ub ae REX B pe Ze EE Ia] — RAR. HP du. 
AS ee PRE. HeyZap 使 用 了 标准 的 触发 按钮 栏 ， 而 Google 则 使 用 垂直 分 布 
的 选项 卡 实 现 过 滤 操 作 (JILE 4-24), 





iPod 去 












» Everything 


Web Images Places News 
Places 


About 1,270,000,000 results. 


Friends 





( )" Images 





Friends Everyone 
S nanad just checked in! 
Angry Birds 
in 0 minutes Shopping 


Get a new Mac, iPod, & more « 
Get free shipping. 
store.apple.com 


Buy Apple products on the gc 


Search nearby: 
Ebony Eyes just checked in! 


F Videos 
ww Bubble Buster @ Use my location 


in 0 minutes 





Updates 


Alin Davis just checked in! 


Apple 

ra Farm Story™ Blogs Apple designs and creates 
Mac laptop and desktop co: 

X operating system, and thes 





0 minutes ago 


Discussions 


C 


Steve Tidwell just checked in! 


BÉ Card Ace: Blackiack 








4-24 HeyZap 和 Google 应 用 


CBS News fll ACL Festival Jv FHABAE FH TRINE, FAP Bek th ee ps 
型 的 文章 或 频道 浏览 信息 ( 见 图 4-25), 


不 要 把 这 种 过 滤 模 式 用 作 主 要 导航 ， 而 应 该 用 它 来 分 组 、 过 滤 信 息 内 容 ， 详 细 内 容 
参见 10.245, 

SXSW le HERH TH EREE, Feeda Fever 新 闻 
阅读 应 用 通过 一 系列 非常 简单 、 有 特色 的 复 选 框 来 过 滤 新 闻 来 源 ， 见 图 4-26. 
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Coheed and Cambria 
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Lineup 








11:18 PM 


SXSW Search Q, 


eT — 一 一 m———— -] 
Music Interactive 

C nd 

© Day 


V off 


Ef March 11 


PRINT AT SXSW w/ HP ePRINT 


| 9:00 AM l 
Jd AOL Studio 
ACC 
9:00 AM 
‘Yr AOL Studio 
ACC 
9:00 AM 
AT&T Lounge 
ACC 






































Links from the past 2 days starting now 


20 Creative Apps For 
Your iPhone 
a M trom Mashable! 









We all know that the iPhone does a 
lot more than just call your friends. 
As an application platform, the 
iPhone has been embraced by 
developers in a massive way, and 
there are apps that can help you... 











a" 20 Creative Apps For Your iPhone 
gi 20 Creative Apps For Your iPhone 
a 20 Creative Apps For Your iPhone 
a" 20 Creative Apps For Your iPhone 


a 20 Creative Apps for your iPhone 





4-26 SXSW 和 Feed a Fever 应 用 
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43.2 ”过 滤 容 器 

过 证 容 磺 也 可 以 用 来 亚 示 过 兰 选 项 ， 它 与 屏 内 过 契 一 样 高 效 。 快 速 请 动 或 触摸 操作 

Xt AP REST IFA as. Audible HJiX JE exe — T fa] Hu UE AR ALES, mu Sam 则 用 许 

ZTEL, 1 LE ue Tay Hoe tive tth Al EAN RBS. PT Sam 应 用 来 

说 ， 更 好 的 设计 应 该 是 保持 地 图 可 见 ， 然 后 动态 地 过 着 俱乐部 地 址 ， 而 不 是 提供 一 
ETCH EWE” Pki (ULE) 4-27). 





T ulli 10:48 Club Locator 


Create 
Account 


The Last Stand (Excerpt) 


The Girl Who Kicked the 
Hornet's Nest (Excerpt) 
, THEHOREET'S O P EEE : = À : 
WEST om Si Lia eS RC Filter By Club Services 
SHE LARSSON larrated by Simon Vance 


The Big Short: Inside the Floral < Bakery Re Pharmacy 
Doomsday Machine (Exce... 


, Meat ^ Fuel & Tire & Battery 
Optical CL Café Digital Photo 


Recent Liquor 











4-27 Audible 和 Sam's Club 应 用 


4.3.3 过滤 对 话 框 
和 了 网络 应 用 中 的 弹出 对 话 框 一 样 ， 过 让 对 话 框 也 是 一 种 自然 交互 模式 。 它 可 以 让 
用 户 选 择 过 滤 选 项 或 取消 操作 。iOS 系统 下 的 TripAdvisor 有 一 个 和 目 定义 过 诚 对 
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话 框 ， 而 Android 系统 下 的 USPS Mobile MEH T BRU AU Xe fe zs 3e qa Hate ( 见 
4-28), 








iPod = 9:56 PM 


= oBn)oe T VK] E 10:16 em 
Back OO advisor’ = Map 





Filter Accommodations [C] 


© Filter By 
S> Screens 


© Site 


Price range 
Any Price (188) , 


Neighborhood 


^YJJPAME Cancel © No context 


None 


Any Of 











4-28 Triplt 3] DueTodayLite 应 用 
因为 过 小 对 话 框 完全 可 以 实现 过 滤 功 能 ， 因 此 可 以 用 前 两 种 模式 实现 更 多 的 操作 ， 
然后 在 内 容 项 所 在 页 面 直接 应 用 过 滤 选 项 。 


s¥a 


使 用 简短 的 过 滤 选 项 列表 ， 和 避免 滚屏 。 如 果 列 表 较 长 或 有 多 个 过 滤 选 项 ， 





考虑 使 用 过 渡 表 单 。 更 多 关于 过 滤 图 表 数 据 的 例子 请 参见 6.1 市 。 


43.4 过滤 表单 

更 高 级 的 过 滤 /提炼 选项 可 以 让 用 户 方便 地 访问 海量 数据 。 例 如 ，Kayak 在 表单 中 
基于 价格 、 上 品牌 和 星 级 过 滤 酒 店 。Zappos 采用 了 类 似 的 方法 ， 在 标题 栏 中 使 用 了 
iOS 系统 标准 的 清除 / 确定 (Clear/Done) 按钮 ( 见 图 4-29), 


Freetime 在 其 过 站 表 单 中 使 用 了 自 定义 的 控制 项 。 用 户 首先 选择 过 着 目录 ， 然 后 选 
择 过 滤 条 件 ， 系 统 会 对 日 程 执行 过 滤 操 作 LE 4-30)。 








5:59 PM ] iPod = 10:25 AM — 


Filters FILTER PRODUCTS (EZ 





Filter Sort 


select al | 





| Product Type > 
$0 - $630 $630 | F 
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 mnm—— UÉÁÉRÉNNNNNAÉ | 
| Color > 


Hotels with no price 





EN | | Price > | 


, Brand > 





| Size > 











4-29 Kayak 和 Zappos 应 用 


filter filter 








4-30 Freetime 应 用 


条 件 过 滤器 也 称 为 谓语 编辑 器 (Predicate Editor) 或 表达 式 生 成 器 (Expression Builder), 
是 一 种 高 级 过 害 功 能 ， 负 见于 报表 工具 。 图 4-31 是 网 络 和 呆 面 程序 第 用 的 标准 布局 。 
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4-31 


Wuffo 的 表达 生成 器 
受 表 单 的 影响 ， 在 移动 应 用 中 创建 条 件 过 症状 非 党 困难 ， 


得 非常 好 〈 见 图 4-32). 


但 Roambi 在 这 


一 点 却 做 
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Cancel 
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Back Add a New Filter 
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Cancel 
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Edit Filters 


®© Enable Filters: 
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Uncheck All 
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4-32 Roambi 的 条 件 过 滤器 
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常见 模式 : LAE (Toolbar), E&A (Overlay Menu)、 情 境 工 具 (Contextual 


Tool) 、 内 联 操作 (Inline Action)、 调 用 操作 按钮 (Call to Action Button), HŒ 
操作 (Bulk Action ) 。 





在 Designing Web Interfaces 一 书 中 (http://shop.oreilly.com/product/97805965 16253. 
do, O'Reilly 出 版 )， 我 和 Bil Scott 提出 了 富 交 互 网 络 应 用 设计 的 6 条 原则 。 其 中 
最 核心 的 两 条 是 : 直截了当 (Make It Direct) 和 轻 量 化 设计 (Keep It Lightweight) 。 
这 两 条 原则 也 同样 适用 于 移动 应 用 界面 中 的 工具 和 操作 设计 。 


“直截了当 ” 指 在 输入 域 周围 显示 结果 ， 界 面 应 该 直接 反映 用 户 的 交互 结果 。Flickr 
的 内 联 编辑 功能 就 是 个 典型 的 例子 〈 见 图 5-1)。 
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图 5-1 Flickr 的 内 联 编辑 功能 


而 “ 轻 量 化 设计 ， 则 要 求 尽 可 能 保持 交互 过 程 的 轻 量 化 。 早 前 的 网 站 Digg 即 十 遵循 这 
一 原则 的 典型 案例 ， 甚 对 文章 的 一 步 化 操作 极 大 地 促 就 了 该 网 站 的 成 功 〈 见 图 5-2), 





注 1: 也 有 人 将 其 译 为 “上 下 文 工 具 ， 与 本 书 译 法 相差 不 大 。( 译 者 注 ) 
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图 5-2 Digg 的 经 量化 设计 “Digg It” it 


当 我 了 解 到 Josh Clark 发 起 的 “按钮 已 过 时 ”这 一 活动 时 ， 我 对 以 上 两 条 设计 原则 
Hir SRAM. th Sik 


“按钮 已 过 时 。 在 现实 世界 中 ， 我 们 通常 需要 按钮 ， 但 它们 工作 时 有 一 定 
的 距离 一 一 是 对 主要 目标 起 作用 的 次 要 工具 。 灯 的 开关 在 这 个 位 置 ， 它 能 

点 亮 的 灯泡 却 在 别 的 地 方 。 通 过 观察 这 一 非 直接 式 的 交互 过 程 ， 我 们 了 解 
e 与 按钮 的 关联 并 不 十 分 明显 。 和 触摸 屏 设 备 带 来 了 一 场 革 命 ， 人 类 可 
以 不 断 地 把 软件 的 主要 内 容 作 为 控制 工具 ， 这 就 形成 了 直接 交互 (Direct 
Interaction) 的 假象 。 


“我 并 不 是 说 一 定 要 完全 抛弃 我 们 业已 熟 态 的 按钮 。 我 们 依然 od 
关 ， 也 需要 交互 设计 中 的 按钮 ， 特 别 是 在 触发 抽象 动作 时 (例如 “ 通 
Twitter 共享 内 容 )。 但 一 定 要 知道 交互 过 程 所 依赖 的 硬件 设备 是 什么 
无 法 实现 直接 交互 时 ， 我 们 确实 需要 做 些 额 外 的 工作 。 触 朱 屏 内 的 界面 多 
许 用 户 在 更 多 的 情境 下 与 设备 进行 直接 交互 。 随 着 新 的 解决 方案 的 出 现 ， 
我 们 不 应 该 墨守成规 ， 而 应 该 敞开 胸怀 ， 接 纳 更 多 的 可 能 性 。 在 为 触摸 屏 
设备 设计 交互 万 案 时 ， 一 定 要 时 第 自 辣 : 此 处 真 的 还 需要 另外 一 个 按钮 或 
控制 项 吗 ? ” 


以 Photoshop Express 为 例 ， 这 一 移动 应 用 沿用 了 旧式 桌面 系统 和 网 络 软件 的 设计 惯 
例 ， 设 计 了 对 一 副 图 像 执 行 裁剪 、 矫 正 、 旋 转 以 及 翻动 等 操作 的 方案 WE 5-3), 
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5-8 Photoshop Express 应 用 


Tap'n'Scrap 应 用 则 可 以 让 用 户 直接 对 图 像 进行 操作 ( 见 图 5-4)。 我 可 以 通过 张 开 并 
拢 的 手指 放大 图 像 ， 用 相框 来 裁剪 图 像 ， 通 过 拖 搜 来 旋转 或 禾 正 图 像 。 我 们 也 可 能 
会 想到 ， 利 用 沸 动 手势 可 以 翻阅 图 像 ， 虽 然 该 应 用 并 没有 实现 这 项 功能 。 


Poe A 











5-4 Tap’n’Scrap 应 用 允许 用 户 直 接 对 图 像 进 行 操作 
如 果 你 的 移动 应 用 真 的 需要 按钮 或 是 控制 项 ， 请 考虑 图 5-5 所 示 的 模式 。 
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ILER RAB 18 A qe CE dde A 情境 工具 
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图 5-5 ”常见 工具 模式 


5.1 工具 栏 


工具 栏 也 称 为 操作 栏 (Action Bar)， 其 中 包含 实现 屏幕 级 操作 的 工具 。 在 Pandora 
应 用 中 ， 工 具 栏 包括 切换 列表 视图 选项 、 曲 目 排 序 选 项 、 暂 停 或 跳 过 片头 选项 等 。 
BlackBerry 操作 系统 下 的 A+Picture Effects 应 用 也 提供 了 包含 常用 操作 的 工具 栏 
( 见 图 5-6)。 





iOS 系统 中 默认 的 工具 栏 是 谈 蓝 色 的 ， 但 其 风格 是 可 以 调整 的 〈 见 图 5-7), 

有 了 时， 某 些 操作 可 能 有 一 些 需要 具体 定义 的 选项 。 不 受 操 作 系 统 平台 影响 的 解决 方 
案 是 ， 用 级 联 式 菜单 显示 用 户 已 选择 工具 的 选项 。 很 多 移动 应 用 程序 都 用 这 种 方式 
提供 编辑 和 格式 定义 功能 (ULI 5-8)。 
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iOS 系统 中 默认 的 工具 栏 和 Trip Journal 应 用 中 风格 化 的 工具 栏 
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5-8 QuickOffice Pro 和 Document To Go 应 用 





Evernote 应 用 通过 另 一 种 方法 提供 富 文本 格式 编辑 功能 
图 5-9), 


可 见 的 嵌入 式 面板 
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5-9 Evernote 应 用 








iOS 系统 中 的 操作 表 (Actionsheet) 是 另 一 种 为 已 选择 工具 提供 更 多 选项 的 方法 。 
Pulse 很 好 地 利用 它 实 现 了 4 种 不 同 的 ， 分 享 一 个 故事 的 方法 。 但 是 ，Yelp! 和 
Ibis 在 使 用 操作 表 显 示 分 类 和 过 滤 选 项 时 都 忘 了 用 标记 标明 用 户 已 选择 的 工具 (HU 


5-10)。 更 好 的 分 类 和 过 滤 方 法 ， 参 见 第 4 昔 。 


Receive Date 


Cancel Cancel Cancel 





& 5-10 Pluse, Ibis 和 Yelp! 应 用 





工具 栏 通常 显示 在 屏 希 底 喘 ， 包 含有 屏 硕 级 的 操作 。 工 具 栏 内 的 图 标 应 该 
熟悉、 易于 识别 的 ， 或 者 采用 标签 加 图 标的 设计 。 


ai 
ait 
T 





5.2 选项 菜单 

与 工具 栏 一 样 ， 选 项 菜单 也 包含 屏幕 级 的 操作 ， 但 却 有 很 多 种 不 同 的 访问 和 显示 方 
法 。Android 系统 的 菜单 通过 硬件 菜单 按钮 访问 ， 但 其 他 系统 下 的 菜单 或 许 要 通过 
点 击 屏幕 上 的 开关 或 触摸 菜单 按钮 才能 打开 OLE 5-11 和 图 5-12). 
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图 5-11 Android 系统 下 的 菜单 和 Audible 应 用 的 播放 菜单 
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如 末 可 能 ， 采 取 和 直接 交互 式 的 设计 方案 。 不 要 把 导航 隐藏 在 选项 米 单 中 。 
« 如 采 某 一 屏 只 有 一 个 操作 选项 ， 芳 虑 使 用 调用 动作 按钮 模式。 


FO 
U 
< 


5.3 ”调用 动作 按钮 


如 末 茶 一 屏 内 只 有 一 个 主要 的 操作 选项 ， 采 用 调用 动作 按钮 的 模式 或 主 比 工具 栏 或 





菜单 要 更 好 。 诸 如 Groupon, Gilt, Expedia 以 及 Foursquare 之 类 的 应 用 都 选择 了 这 
种 模式 ， 而 设 有 使 用 传统 的 工具 栏 或 选项 某 单 WL] 5-13 和 图 5-14). 





iPod A 12:14 PM 


Jane, 201.0 @ B Q Bl) G s:59»» 





Austin Purchase 





Habitat Suites 











Quantity Price Total 
JAANA BANGLE SET 1 x $65 z $65 
Qty: 1 : Saved Credit Card ****-7757 > 
The Original Set 
SA —— Send as a Gift? > 
Qty: 1 $91.00 
Happy Giddy Tunnel 
Sf melissa & Doug Confirm Order 


Qty: 1 


Subtotal $172.00 ©) All information will be sent over a secure connection. 


nee 


Today's Deal 











rmont Miramar Hotel... 
Santa Monica, CA " 


Places 


"y 
K- 
yA 


Ogawa Cafe 
E 4th St 
CHECK-IN HERE 


People | Details | Tips 


wW Courtney Lewis 





is the mayor 
UD ia 
Pool Internet Pets Courtney Lewis 
l tion 1% hrs ago 


The Fairmont Miramar Hotel & Bungalows is 
located near the beach in Santa Monica and close Todd P. 
to Santa Monica Pier and Venice Beach. 1% hrs ago 


Additional area points of interest include J. Paul 
E Dan Maccarone 


Getty Museum and Getty Villa. 
对 于 只 有 一 个 主要 操作 ， 外 加 一 项 辅助 操作 的 屏幕 来 说 ， 这 种 模式 也 能 起 到 不 钳 的 
效果 ， 比 如 Bill Minder 应 用 的 设计 〈 见 图 5-15)。 但 在 这 种 情况 下 ， 一定 要 为 主要 
的 操作 设计 出 不 同 于 其 他 按钮 的 视 完 效果 。 
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5-14 Expedia XJ Foursquare 应 用 
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5-15 Bill Minder 和 Nerflix 应 用 


Va 


不 要 把 主要 操作 隐藏 在 菜单 中 ， 也 不 能 将 其 设计 成 无 法 识别 的 工具 栏 图 标 。 


E 
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By 4 
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5.4 情境 工具 


一 定 要 让 其 显而易见 (良好 的 对 比 效果 )， 不 言 自明 (含义 清晰 的 标签 )。 








情境 工具 可 以 作用 于 屏幕 内 特定 的 操作 对 象 。 如 有 果 只 在 恰当 的 情境 处 显示 此 类 工具 ， 
它 就 能 起 到 非常 好 的 效果 〈 还 能 有 效 缓解 界面 的 混乱 现象 )。 例 如 ， 在 ChartDroid 
应 用 中 ， 长 按 某 个 对 象 (Android 系统 特有 的 手势 ) 能 调 出 图 表 选 项 在 WebOS 系 
统 下 的 Tweed 中 ， 触 摸 某 条 推 信 能 调 出 一 个 选项 列表 (ILE 5-16 至 图 5-18). 
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5-16 ChartDroid #0 Tweed 应 用 
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5-17 Android 系统 下 的 Mail 和 iFiles 应 用 
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5-18 Barns & Noble Nook 和 2doApp 应 用 





情境 工具 可 以 是 模 态 化 的 ， 如 先前 的 例子 ， 也 可 以 是 非 模 态 化 的 ， 如 DailyBurn 和 
Twittermobile 的 设计 (ILA 5-19), 
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5-19 DailyBurn 和 Twittermobile 应 用 


Va 


如 末 可 能 ， 采 取 直 接 交 互 式 的 设计 方案 。 如 琳 需 要 按钮 ， Rae E E 
` 可 操作 对 象 的 旁边 。 (RR Pro do n OE 的 图 标 。 





5.5 ”内 联 操 作 


内 联 操 作 也 可 作用 于 屏幕 上 某 个 特定 的 对 象 ， 但 与 前 一 模式 不 同 的 是 ， 其 操作 总 是 
可 见 。 例 如 Audible 应 用 中 的 “下 载 ” 按 钮 和 Teleflora 应 用 中 的 “购买 ”按钮 (IL 
5-20), 


很 多 程序 的 内 联 操作 都 采用 了 全 状态 按钮 (State-full Button), 4H ACL 中 的 “添加 ” 
按钮 ， 点 击 后 会 变 成 “ 移 除 ”按钮 ，OpenCaching 中 的 “收藏 ” 星 标 可 以 开启 或 关 
BH] (WLI 5-21)。 如 果 按 钮 包含 有 更 多 的 状态 ， 请 参阅 下 一 模式 一 一 多 状态 按钮 。 
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5-21 ACL Music Festival 和 OpenCaching 应 用 








A a 如 果 可 能 ， 采 取 直 接 交 互 式 的 设计 方案 。 Hu rn 
象 的 位 置 。 使 用 用 户 熟 悉 或 带 有 文字 标签 的 图 标 。 每 个 对 象 最 多 只 能 有 
Ry 1~2 种 内 联 操作 。 





5.6 ”多 状态 按钮 


正常 情况 下 ， 用 户 界 面 的 控制 项 应 该 只 有 一 个 操作 目的 。 但 多 状态 按钮 是 个 例外 。 
征 受 限 的 移动 设备 屏幕 内 ， 按 钮 既是 触发 副 又 可 以 作为 一 种 反馈 机 制 ， 这 样 做 具有 
一 定 的 实用 价值 。 





以 在 Audible 应 用 中 下 载 一 个 故事 为 例 ( 见 图 5-22)。 你 最 先 看 到 的 是 下 载 一 个 
故事 有 的 内 联 操 作 先 项。 触摸 它 可 以 开始 下 载 文 件 ， 此 时 它 会 变 成 一 个 表示 下 载 
进度 指示 如 ， 同 时 附 高 有 可 以 扩 击 ， 用 来 取消 下 载 鸭 选 项 ， 以 及 观看 该 故事 的 
选项 。 
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EN The Throne of Fire 
(Unabridged) Part 2 

By Rick Riordan 
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6 hrs 19 mins 
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By Rick Ricrdan — 
Harrnbed En Kevin A. Free, Kath... 

6 hrs 18 mins 
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| Narrated by Kevin A. Free, Kath... 
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5-22 Audible 应 用 


在 Apple App Store 应 用 和 Android Market 应 用 中 ， 两 者 的 “购买 ”和 “更 新 ” 按 
钮 都 使 用 了 这 一 模式 ( 见 图 5-23). 


男 一 种 第 见 ean n. 5-24 和 图 5-25), "ET 
FAP HORE VE GRE, SC — ODOR TE, Z9510.3 市 。 但 在 执行 不 可 修复 
的 操作 之 前 ， 这 种 要 求 确 认 操 作 的 设计 是 非常 合 etit 
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Camping Trip Planner 


Camping Trip Planner 
Jimbl 


Description 


Configurable camping planner with everything 
needed for any camping trip. Comes pre- 
populated with more than 225 camping items. 


More 


Version 3.0 81.86KB 
1,000-5,000 downloads 91 ratings 
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we Travel & Local 


Camping Trip Planner 


Camping Trip Planner 
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Allow this application to access: 


Storage 
Modify/delete SD card contents 


More 
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home Phone 








ringtone Default > 
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Last 
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N 
/ 











Item One in #07333B 22pt $19.98 | Subtotal: $39.96 
Price: $9.99 Shipping: $7.49 





EED (eme D 


Item Two in #07333B 22pt $19.98 


eX UE Creme ) 


Continue Shopping (18pt regular 44202020) 


TOTAL: $47.45 


Two-tap Remove: First tap, button 3 i 
changes to red; Second tap commits 
action (item is removed, others slide up) 











5-25 Adobe Flex 4.5 Reference 应 用 中 的 交互 笔记 





多 状态 按钮 非常 适合 一 系列 联系 紧密 、 在 有 限 屏 幕 空间 连续 执行 内 的 操作 。 





5.7 ”批量 操作 
常见 的 批量 操作 包括 : 选择 、 添 加 /删除 和 重新 排序 。 程 序 的 主屏 幕 内 不 应 该 塞 满 
此 类 操作 选项 ， 而 应 该 采用 批量 操作 模式 的 设计 。 
iOS 系统 自 带 的 Photos 应 用 提供 了 一 种 选择 模式 ， 用 户 可 以 从 相册 中 选择 文件 进行 
共享 。 与 此 类 似 ，Animoto 应 用 提供 了 对 视频 某 一 部 分 内 容 进 行 重新 排序 和 移 除 操 
作 的 设计 ( 见 图 5-26), 





Shopping List 应 用 的 设计 包含 有 一 个 人 简单 的 列表 编辑 功能 〈 见 图 5-27). 
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5-26 iOS 系统 下 的 Photos 和 Animoto 应 用 





12:16 AM iPod = 12:16 AM 


My Shopping List i sts My Shopping List Lists My Shopping List 


Undone Undone 





M Remove (0) 一 Move (0) i| Remove (3) = Move 全 





5-27 Shopping List 应 用 


诸如 Path 和 Pulse 之 类 的 应 用 都 有 一 个 简单 的 配置 页 面 ， 可 以 配置 添加 、 移 除 和 重 
新 排序 之 类 的 批量 操作 〈 见 图 5-28)。 
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: 诸如 删除 和 重新 排序 之 类 的 批量 操作 最 好 在 编辑 模式 下 进行 。 提 供 明显 的 
a 选项 ， 让 用 户 可 以 退出 编辑 模式 。 








op 6 = 





图 表 


常见 图 表 模 式 : mai MYA Ze (Chart with Filters)、 总 览 加 数据 式 图 表 (Overv- 
iew + Data), Woy (Scrolling with Preview) 、 数 据点 细节 图 (Data Point 
Details), 、 详 细 信 息 (Drill Down)、 缩 放 (Zoom In)、 数 据 透 视 表 (Pivot 
Table) 、 火 花 谱 线 图 (Sparklines ) 。 


移动 应 用 的 图 表 设 计 可 以 沿用 印刷 和 有 加 面 系统 图 表 设计 的 原则 ， 也 可 以 效仿 后 两 
者 成 功 的 案例 。Dona M. Wong 撰写 的 一 本 名 为 The Wall Street Journal Guide to 
Information Graphics: The Dos and Don'ts of Presenting Data, Facts, and Figures 的 
书 很 好 地 介绍 这 方面 经 验 。 此 外 ， 我 还 建议 读者 读 一 下 Stephen Few 写 的 关于 图 表 
设计 的 书 。 


所 有 的 图 表 模 式 都 建立 在 基本 图 表 的 设计 之 上 。 最 简单 的 图 表 应 该 包括 标题 、 轴 标 
签 以 及 数据 。 数 据 应 该 显示 为 饼 状 图 (Pie)、 条 形 图 (Bar), E (Coulmn), 
面积 图 (Area), H&R] (Line), Aa K (Bubble)、 散 点 图 (Scatter Plot)、 子 弹 
(Bullet)、 雷 达 图 (Radar)、 计 量 图 (Gauge) 或 混合 图 表 。 根 据 图 表 的 类 型 不 
同 ， 或 许 还 需要 设计 图 例 。 


RunKeeper Pro 用 柱状 图 显示 了 用 户 的 跑步 速度 ， 而 GasLogto 用 折线 图 表示 了 基于 
时 间 的 油耗 成 本 ( 见 图 6-1). 
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> 3.56 E 
Stop “Pause 











6-1 RunKeepr Pro 和 Gas Log 应 用 


建立 了 基本 的 图 表 之 后 ， 一 定 要 小 心 图 表 垃 圾 (Chart Junk)。 图 表 垃 圾 指 图 表 中 
那些 多 余 的 无 助 于 用 户 理解 图 表 的 信息 ， 或 者 会 让 浏览 者 分 心 的 视觉 元 素 (维基 百 
科 )。 关 于 图 表 垃 圾 的 更 多 内 容 ， 参 见 10.4 市 。 


在 打开 Photoshop 设计 图 表 之 前 ， 男 一 个 要 做 的 事情 是 了 解 程序 员 使 用 的 图 表 库 。 
类 似 于 ZingChart 和 Sencha Touch Charts 之 类 的 图 表 库 本 身 就 包含 有 一 些 设计 精 民 
的 图 表 (ILAI 6-2), 但 其 他 一 些 库 中 的 图 表 则 可 能 需要 程序 员 自 己 额外 编写 一 些 代 
码 才 能 使 用 。 
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Quarter 0 


Jan Feb Mar Apr May Jun 








6-2 ZingCharts BRE 





108 | 第 6 章 





本 童 我们 将 介绍 的 图 表 模 式 如 图 6-3 所 示 。 
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带 过 滤器 的 图 表 带 预览 窗口 的 图 和 总 览 加 数据 式 图表 数据 点 徊 市 图 
= | ZOMCONN 
| 
日 p WS Seed 
*: | P ds à illa ad 
| /Vv 
iy Label ENNY 
| 一 /YY 
数据 查询 图 LEGES 数据 透视 表 火花 详 线 图 








6-3 ZUERA 


6.1 市 过 滤器 的 图 表 
我 们 可 以 为 基本 的 图 表 形 式 加 上 时 间 控 制 或 其 他 过 让 功能， 以 提升 其 数据 表现 能 


以 Fidelity 和 AccuFuel 应 用 的 设计 为 例 ， 程 序 可 以 在 不 同 的 时 间 点 处 分 析 其 中 的 数 
im (UE 6-4). 


ADIRE de DEAE E RT IR] BE UE T al], ERARA boe] AT A AE PB Bede 28 |]. TE 
Chaikin 应 用 中 ， 由 于 触摸 点 击 对 象 位 于 图 表 之 内 ， 用 户 其 至 连 看 都 看 不 清楚 ， 更 不 
要 说 对 其 进行 操作 了 ( 见 图 6-5)。 
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Company Profile Trade 


Spdr S&P 500 Etf 


6m} ty 5y 


Fundamentals Performance 
Mkt Cap. $81.30b 52 wk Hi 136.43 
Revenue $0.00m 52 wk Lo 105.23 
P/E 0.00 52 wk Perf +10.50% 
Yield 2.16% Rel to S&P -0.18% 


RIMM 


CHAIKIN POWER TOOLS @ U.S. markets are closed. 
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我 推荐 把 控制 项 放 在 屏幕 底部 ， 如 SmartGlance FU Blue Mobile 应 用 的 设计 (IL 
6-6) ， 这 样 用 户 可 以 用 拇指 对 其 进行 操作 ， 手 党 也 不 会 遮 住 要 访问 的 数据 。 
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6-6 Blue Mobile #J SmartGlance 应 用 


Android 系统 下 的 NewsWeather 和 Daylight Calendar PH ABAI HA A BA FUT ial ct ue Es 
表 所 显示 内 容 (ILE 6-7). 
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6-7 Android 系统 下 的 NewsWeather 和 Daylight Calendar 应 用 





图 表 的 各 方面 特征 都 可 用 来 过 夸 信 息 。 在 来 自 Sencha Touch Charts 图 表 库 的 例子 
中 ， 图 例 可 以 用 来 过 滤 图 表 所 显示 的 数据 。 点 击 图 表 能 调 出 图 例 ， 点 击 “Coal” 可 
以 动态 地 移 除 图 表 中 关于 US Energy Consumption 的 变量 ( 见 图 6-8). 





Qt) DoeB"nme:;»« ORIUEEBDo BN @257™ 
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6-8 X5 Sencha Touch 图 表 库 的 示例 


» 8 


" 使 用 标准 的 UI 过 滤 控 制 以 及 过 滤 模 式 ， 参 见 第 4 童 。 动 态 更 新 图 表 数 据 ， 
` 而 不 是 扔 给 用 户 一 个 “应 用 ”(Apply) 按钮 。 


6.2 ”市 预览 窗口 的 图 表 
这 种 图 表 模 式 最 适合 用 来 显示 随时 间 变 化 的 数据 ， 通 过 提供 更 多 的 上 下 文 内 容 和 历 
史 数 据 ， 它 可 以 更 好 地 与 移动 屏幕 融合 ， 而 不 需要 用 户 执行 “请 动 ” 操 作 。 


ROUDE SOAR, FDR BCE Ti be OBA AR AZ. — EU Pie 22 af T 
“a”, RRR CTR), RTL frUSE ( 见 图 6-9). 
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大 部 分 商业 应 用 都 采用 只 读 的 带 预 览 窗 口 的 图 表 ( 见 图 6-10) ， 在 较 长 一 段 时 间 内 
的 内 容 之 中 显示 当前 数据 例如， 当天 的 价格 上 升 ， 但 整个 月 或 整 年 的 价格 却 处 于 


下 降 趋势 )。 更 多 例子 参见 数据 点 细 习 图 模式 .。 
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3 a 
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Ly I| ZEE De Tr T A ef A AE ERR XXE IAS HU. Ande n] 5c HR) Pi 











窗口 ， 使 用 较 大 的 触摸 对 象 更 易于 用 户 的 操作 。 


Ve hn 3k > [z 
6.3 总览 加 数据 式 图 表 
第 3 草 也 介绍 过 这 种 模式 ， 但 在 本 草 中 特 指 用 图 表 作 为 总 览 的 模式 。 6-11 和 
6-12 中 的 两 个 例子 都 用 图 表 总 结 了 最 重要 的 信息 ， 在 其 下 方 有 一 个 表格 显示 详细 
数据 。 


总 览 应 该 向 明 扼 要 ， 表 格 的 设计 应 该 易于 阅读。 以 上 来 自 于 MicroStrategy 应 用 的 
例子 束 显 得 非常 拥挤 ， 其 所 用 字号 也 小 于 移动 应 用 应 该 采用 的 字号 大 小 。 备 选 方案 
更 易于 阅读 ， 并 在 屏幕 顶端 对 关键 性 的 量度 做 了 总 结 : Total Customers 和 Average 
Revenue per Customer ( 见 图 6-12 ) 。 
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6-12 Microstrategy 应 用 的 Income Analysis 模块 及 其 备 选 方案 ( 线 框图 ) 





Rj 


x 测试 图 表 ， 看 看 用 户 是 否 能 回答 以 下 三 个 简单 的 问题 主题 是 什么 ?哪些 
。 信息 最 为 重要 ? 最 重要 信息 的 具体 数值 是 多 少 ? 


6.4 ÄR AMT E 


T2 zJ) Fe Ae A 48 Ht 4€ (onHover) 状态 ， 所 以 要 用 另外 一 种 交互 方式 来 显示 数 
据点 的 详细 信息 。 在 以 下 例子 中 ， 点 击 图 表 将 显示 已 选择 日 期 内 页 面 训 览 的 详细 信 
E, (DLE 6-13), 
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在 来 自 NASDAQ QMX 和 Yahoo! Finance 两 个 应 用 的 例子 中 ， 数 据点 在 图 表 底 部 的 
预览 窗口 中 高 亮 显 示 (E| 6-14), 
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3€ Sencha Touch 图 表 库 的 示例 使 用 模式 对 话 框 来 显示 数据 点 的 详细 信息 ， 相 比 之 
下 ， 在 数据 点 周围 显示 详细 信息 的 做 法 要 更 好 一 些 ( 见 图 6-15), 
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6-15 来自 Sencha Touch 图 表 库 的 示例 





Roambi HH f — Fay Dich oe “+” Riri EE EAI “ae”, BIA 
HL fue A8 AVE — 7S FLA 31 BIE EB RIE. Roambi 的 开发 人 员 称 为 
“viewtron” (YURI 6-16), 





Close Cinco Bayou... Close Cinco Bayou... 


September 




















你 可 以 考虑 通过 “ 按 下 并 持续 ”(onTap) 操作 来 显示 数据 点 的 详细 信息 ， 


网 络 应 用 的 图 表 让 人 们 形成 了 通过 “指针 匡 停 ”操作 查看 细节 的 心理 预期 。 
( 
”提供 用 户 所 需 的 更 多 内 容 。 


6.5 详细 信息 图 


根据 可 用 性 最 大 化 原则 “有 输入 的 地 方 就 应 该 有 输出 。 用 户 期 望 通过 触摸 图 表 来 查 
看 详细 信息 。 详 细 信息 图 和 数据 氮 细 区 图 不 能 同时 存在 ， 你 应 该 衡量 这 两 者 哪 一 个 
能 最 大 程度 地 发 挥 价值 ， 然 后 选择 适当 的 模式 。 


我 的 设计 团队 设计 了 Adobe Flex Sales Dashboard 应 用 ， 在 第 一 幅 图 表 中 ， 利 用 工具 栏 
显示 详细 的 图 表 人 信息。 显然 ， 访 问 详细 信息 图 的 路 径 与 整个 页 面 ， 以 及 图 表 的 标题 融 
为 了 一 体 。 在 这 个 案例 中 ， 我 们 还 为 不 同 的 操作 系统 设计 了 色调 统一 的 详细 信息 图 ， 
当然 ， 根 据 操 作 系 统 不 同 ， 可 能 需要 在 UI 中 设计 一 个 “返回 ”按钮 ( 见 图 6-17). 























FX FLEX SALES DASHBOARD Fx Avg Revenue per Sale Fx Avg Revenue per Sale 


My Sales 








6-17 Adobe Flex Sales Dashboard 应 用 中 的 参考 应 用 
在 设计 的 过 程 中 应 该 利用 视觉 吸引 (Invitation), ， 以 此 鼓励 第 一 次 使 用 软件 的 用 户 


触摸 工具 栏 查 看 详细 信息 ， 第 8 章 的 Roambi 应 用 为 “帮助 文本 ”设计 了 文字 提示 
“触摸 工具 栏 以 查看 数据 ”( 见 图 6-18). 
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&6-18 Roambi 应 用 ， 按 下 信息 栏 查看 数据 





Y 
‘ 


E»! 吸引 用 户 查 看 更 多 的 数据 。 用 面包 届 式 的 导航 (Breadcrumb) 显示 层级 结构 。 


6.6 缩放 图 表 


图 表 或 许 仅 仅 是 屏幕 上 显示 的 众多 界面 元 素 中 的 一 个 ， 如 采 太 小 就 不 易于 阅读 。 篆 
见 的 方式 是 暗示 用 户 旋转 屏幕 ， 以 全 屏 的 方式 查看 完整 图 表 。 隐 藏 标题 和 导航 元 素 
能 为 图 表 腾 出 更 多 的 空间 。 在 用 户 把 设备 旋转 回 默认 状态 时 ， 重 新 显示 导航 和 其 他 
控制 元 素 。 

一 定 要 诱导 用 户 旋转 设备 ， 以 查看 图 表 的 详细 信息 。NASDAQ QMX (Jl A 6-19) 
用 一 个 旋转 手机 的 图 标 来 提供 上 暗示， 而 Bloomberg (ILEI 6-20) 则 用 标签 告知 用 户 
“旋转 以 查看 全 图 。” 这 种 视觉 吸引 只 有 在 用 户 按 下 图 表 时 才 显 示 出 来 。 

















Stock Finder NDAQ 


T HASDAO- GS 


| Es SMA 76 Prev. Close 28,83 ll SMA 20 


The NASDAQ OMX Group, Inc. 
29,50 29,71 2 747 140 


28,61 TAT: 28,83 


Currency: USD 
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诱导 用 户 旋 转 设 备 来 以 全 屏 方式 查看 图 表 ， 在 用 户 转 回 设 备 时 自动 恢复 
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6-20 Bloombery 应 用 


6.7 ”数据 透视 表 

数据 透视 表 也 被 称 为 “OLAP 立方 体 ”(OLAP Cube), ， 非 常 适 合用 来 建立 轻 量 化 的 
交 又 数据 表 。 在 桌面 和 网 络 应 用 中 ， 通 过 对 图 形 化 界面 的 拖 虹 操作 ， 用 户 可 以 建立 
并 修改 表格 的 总 体 结 构 。 这 种 对 表格 总 体 结构 的 转换 或 数据 透视 正如 其 名 字 一 样 
(维基 百科 ， 见 图 6-21), 





Federal Shipping Grand Total 
bunt Count of Sales Amount of Sales Avg. Sale Amount Count of Sales Amount of : 

H Venezuela . $12,938.92 $417.38 
: France : $28,737.23 $552.64 
Québec d $6,052.15 $550.20 

Canada BC . $13,546.63 $483.81 
Sub Total : $19,598.78 $502.53 

B Finland ! $4,889.84 $244.49 
H Ireland . $551.91 
Portugal 5,438.49 - $362.57. 


= Germany $53,474.88 $713.00 
- Denmark . $18,295.30 $831.60 
RJ $3,289.80 $299.07 

Brazil SP d $13,224.76 $413.27 


Sub Total i $16,514.56 $384.06 
H Belgium . $11,393.30 $495.36 
M Switzerland . $13,625.28 $681.26 


Auctria 











6-21 Microsoft Silverlight 的 Viblend 数据 透视 表 





Roambi MHRA PPR ae fel A, MUAA ee Y ATE, 
但 对 于 每 个 维度 ，X 轴 可 以 选择 特定 的 数据 类 别 〈 图 中 桔 黄 色 的 框架 )。 这 种 设计 可 以 
方便 地 通过 Year by Quarter Profit of All Cities 选项 奋 看 全 年 的 信息 ， 还 可 以 迅速 调整 图 
表 ， 通 过 Product Line: Books 之 类 的 选项 只 查看 某 个 特定 产品 线 的 信息 。 再 次 选择 之 
后 ， 图 表 就 可 以 通过 Online Channel 显示 所 有 城市 和 书籍 的 信息 (ILEI 6-22), 
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在 一 屏 内 显示 数据 透视 图 表 的 已 选择 项 和 选择 结果 。 根 据 用 户 的 选择 动态 
， SUA. 


6.8 火花 谱 线 图 

火花 谱 线 图 又 称 为 微 图 表 〈Microchart) ， 它 是 以 小 体积 和 高 度 密集 的 数据 埋 称 的 信 
息 图 形 。 它 用 简单 的 方式 ， 在 较 小 的 空间 内 呈现 某 些 量 的 发 展 和 变化 趋势 ， 如 平均 
温度 或 股票 市 场 的 波动 。( 维 基 百 科 ) 


火花 谱 线 图 特别 适合 移动 应 用 ， 因 为 它 能 提供 数据 的 整体 情况 或 变化 趋势 ， 却 不 像 
完整 图 表 那 么 占 空 间 ( 见 图 6-23 和 图 6-24) 。 


3 a 


ESPACE PER ITA RA, LEA Pin itt SE. BK Ee AE a f 
a 息 图 显示 图 表 的 所 有 细 市 信息 。 
a’ 
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Browser: Safari 528.16 


Windows 7 m 
Browser: Internet Explorer 8.0 364 
Windows 7 
Browser: Firefox 3,6.13 202 
Windows XP 186 
Àrowser: Internet Explorer 8.0 
iPhone (not set 

( ) 169 





reix 3.6.15 


Browse 


2010 


06 april 


2011 
06 april 


Windows 7 

rowser: Firefox 3.6.12 
Windows XP 
Browser Firefox 3.6.13 
Windows 7 C 








Ch NH] «3 © 15:26 


Norton Mobile Utilities 


A Norton 


Battery 
10096 


Temp 
89.6 °F/ 32.0 °C 


CPU 


16% 


Memory (total: 225 MB) 


180M 


Network 


Upload: 0 Kbps 


System Information 

















6-23 Google Analytics 的 Analytix 模块 和 Norton 的 移动 应 用 
Sales by Store i te 
y VA . 
& RECOVERY. 

Monthly Sales 

: Total US 
All 'SFUNDING | 

USD (thousands) % of announced 

Corner Type x 
V. 72 6k IS $297.147.930 1 
Inside Mall it $136,267,181 Boa 

V $76.4K a JOBS 

Mini Mall ence Oct 2008 

B 0 ok | .一 一 一 640,329 
Movie Center = AWARDS 

t sanak Lg"; "m. 

Plaza 

M $174K 

uill) 
6-24 Roambi 应 用 和 recover.gov 





BT 





XE] 





常见 模式 : x (Dialog). tézs (Tip). (& AIS (Tour), dimos (Demo). 
幻灯 片 (Transparency)、 首 次 使 用 引导 (1st Time Through)、 持 续 视 觉 吸引 
(Persistent) 、 可 发 现 的 视觉 吸引 (Discoverable) 。 


你 还 记得 第 一 次 使 用 Photoshop 的 情形 吗 ? FAVE Bee, FTP MAR Zia, EN 
在 眼前 的 是 一 个 空白 的 画布 和 一 系列 功能 强大 的 工具 〈 见 图 7-1)。 





gs Adobe Photoshop 














7-1 Photoshop 5.5 的 界面 





“PR, AA ERM, ix 6 D RENE EG EUH RAN De, DABIS SU 
知 。 实 际 上 ， 我 根本 就 无 从 下 手 ， 但 我 已 经 在 这 球 软 件 上 花 了 不 少 钱 了 ， 就 应 该 
学 会 如 何 使 用 它 。 所 以 我 严 了 一 本 Carla Rose 编写 的 教程 一 一 Sam’s Teach Yourself 
Photoshop 5 in 24 Hours， 然 后 开始 学 习 。 





大 约 十 年 之 后 ， 市 场 上 已 经 有 成 千 上 万 个 移动 应 用 。 在 任何 一 个 类 别 里 都 有 几 十 个 
有 具有 相同 功能 的 产品 ， 并 且 很 多 都 是 免费 的 。 因 此 ， 如 采 产 品 界面 无 法 在 5 分 钟 之 
内 留 住 用 户 ， 那 么 用 户 就 会 转 而 下 载 男 外 一 球 应 用 。 


Layar Reality Browser， 这 于 增 强 现实 的 应 用 给 你 的 第 一 印象 如 何 CULL 7-2) ? 










ZAF ©U” ma 10:10 v m o 2:17 PM 


Lavar a : Accuracy: 6m ^^^. 
2 2 W wiki Range: 10km ^^ 
i 2 a a a a bs, 


r 
= 









| WI DL 
| The Free Encyclopedia 
LR o n 


= 


Q 














7-2 Layar Reality Browser 

什么 东西 能 让 我 从 这 个 灰色 的 屏幕 上 看 到 接近 于 现实 世界 的 东西 ? 是 视觉 吸引 ! TE 
觉 吸 引 是 非常 有 效 的 提示 工具 ， 通 稍 在 用 户 第 一 次 打开 某 个 应 用 ， 或 进入 某 个 新 的 
界面 时 出 现 。 价 单 的 视觉 吸引 能 扭转 乾 填 ， 把 令 人 诅 形 万 分 的 第 一 次 使 用 经 历 变 成 
满意 的 产品 使 用 体验 。 


移动 应 用 中 的 视觉 吸引 模式 如 图 7-3 所 示 。 








对 话 答 提示 
DO THIS 
Top to get started 
THEN THIS 
幻灯 乒 首次 使 用 引导 








图 7-3 BAM MS exh 


7.1 对话 框 





4 b 
使 用 向 导 视频 演示 
Pull to refresh 
Add a cord J 
持续 视觉 吸引 可 发 现 的 视 党 吸引 


或 许 是 因为 很 容易 通过 编程 实现 ， 带 有 使 用 说 明 的 简单 对 话 框 是 移动 应 用 中 最 常见 
最 得 不 到 用 户 注 意 的 元 素 ( 见 图 7-4)。 





Hy mtu SEX. [BUE E Ie EL URS 








Your Name 


| Did You Know? | 


Once your target weight is set the 
app icon on your home screen will 
show a red badge indicating how | 
many pounds or kilos you need to | 


| gain or lose to reach your target. 


OK 








june 5, 2011 Q9 B @ Bl] €9 2:00-m 





© Welcome to Action Method! 


Start by adding a new project 
or a new action step. 


Just click 'New Project’ or the 
'+' below. 


Get started 








7-4 Target Weight 和 ActionMethod 应 用 





部 吸引 
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HEWA Ae A, WARP T Aa tho OT ee B fil 
用 说 明 。 





7.2 提示 


提示 可 以 出 现 于 屏幕 的 任何 位 置 ， 它 比 对 话 框 更 能 融入 使 用 情境 。 除 了 主页 面 之 外 ， 
提示 也 可 用 于 其 他 屏幕 。eBay 的 应 用 利用 提示 把 用 户 的 注意 力 引 导 至 Save a Search 
功能 ， 如 果 疫 有 提示 ， 用 户 可 能 会 忽略 这 一 功能 ， 因 为 此 处 通常 用 来 显示 页 面 标题 
( 见 图 7-5)。 








iPod = 9:18 PM  ..? BEng B 7 Me 236m 
a —— t = 


Drag apps to your Home screen. 
Touch & hold an app in the 
Launcher until it vibrates. 


^ Tap this star to save a search. We J 


can even notify you when new 
matching items are found! 





NWT Seven 7 Jeans w/ $29.99 

studded detail on + $8.00 
pockets sz 14 0 bids > 

4m 225 

NWT Seven 7 Jeans w/ $29.99 
ae studded detail on + $8.00 》 

pockets sz 20 0 bids 

| 6m 3s 

NWT Seven 7 Jeans w/ $29.99 

studded detail on 4 $8.00 
pockets sz 20 0 bids ? 





My Accoul My Device Setup 





Search 








7-5 eBay 应 用 和 Android OS 


ShoppingList 应 用 的 所 有 主要 模块 都 采用 了 提示 (LRI 7-6). 





提示 要 尽 可 能 地 接近 它 所 指向 的 功能 ， 保 持 内 容 的 简洁 ， 在 交互 开始 时 
(也 就 是 当 用 户 触摸 屏幕 时 ) 关闭 提示 。 























10:16 PM 10:17 PM 


My Shopping List Edit My Shopping List Edit 


F To expand the product 
s filter, just click the 
toolbar! 


Click here to add some 
new items to your 
shopping list! 








7-6 Shoppng List 应 用 


7.3 使 用 回 导 


通过 提供 一 屏 又 一 屏 的 新 内 容 、 不 断 出现 的 新 功能 ， 使 用 向 导 能 提供 无 尽 的 视觉 吸引 。 
Nike GPS 的 使 用 向 导 模 块 就 是 个 非常 优秀 的 设计 ， 它 专门 针对 移动 终端 进行 了 优化 ， 
简化 了 内 容 、 导 航 ， 使 图 像 更 生动 并 使 用 了 明显 的 退出 标志 ( 见 图 7-7 和 图 7-8) 。 





7:14 PM 


Welcome to Nike+ 


TREE 
7H 


(0'00"  (500:00 


Map vour Route 


Start a New Run 


Take the Tour 


Tour the Nike+ App 


Play Nike+ Tag 











7-7 Nike GPS 应 用 








Thank You for 
Purchasing Calcbot. 





Tap “Next” to see how it works. 


eee 





Calcbot is a simple yet intelligent calculator 
with a live expression view and history tape. 


1:33 PM mm } 


Swipe Down to 


Access the History Tape. 


5318008 
0.7734 






Every time you hit the equal key, your 
calculation gets saved to history. Recall 
numbers, expressions, or send them via 


email...all from the history tape. 


. ee 











顾 内 容 简洁 和 视觉 效果 。 





7.4 ”视频 演示 








使 用 向 导 能 很 好 地 从 用 户 使 用 目标 的 角度 出 发 ， 突 出 应 用 的 主要 功能 。 兼 





对 于 那些 依赖 于 特定 动作 或 交互 实现 功能 的 应 用 来 说 ,视频 演示 或 许 古 最 好 的 视 宽 
吸引 模式 ， 因 为 视频 演示 的 本 来 就 是 处 于 交互 状态 的 应 用 。Roambi 用 演示 来 表现 
它 宽 这 的 数据 可 视 化 方式 ， 以 及 专门 为 优化 导航 和 软件 使 用 探索 而 设计 的 操作 动作 
( 见 图 7-9), Google Goggles 的 使 用 同 导 中 包含 有 一 个 可 以 在 YouTube P FTA NI H 





的 演示 视频 ( 见 图 7-10). 





Welcome To Roambi 


| Roambi gives you an exciting new 
way to interact with data on your 
| iPhone. Try the samples included in 
| the app, then transform your own 
Ī| data and deliver it to any iPhone at 
www.roambi.com. It's free! 


| Close Watch Demo 








12:11 AM 


0:05 =“ -0:33 Fd 
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132 | #72 











BEGCS BHoWde:e EWES BUMS 1015 
Google goggles tabs p 





[i] http://m.youtube.com/#... Ei 


You iii 


unveil.mov 


Probably won't work with... 


5 28 


Animals Furniture Apparel 
Watch a video to learn more 


4 | - | Save to | Share | 四 
teamunveil ~m 
Dec 3, 2009 — 964,507 views ma 
692 likes, 90 dislikes = 


| eas | sme m Comments 














7-10 Google Goggles 应 用 


Se 


视频 演示 可 以 展示 应 用 的 关键 功能 ， 也 可 以 用 来 显示 应 用 的 标准 使 用 流程 。 














一 定 要 提供 常见 的 视频 控制 选项 停止、 暂停、 音量 控制 等 )。 


7.5 JIE 


其 他 的 视 沉 吸引 模式 都 在 各 种 网 络 程序 中 出 现 过 ， 而 幻灯 上 族 则 是 唯一 出 现在 触摸 





设备 上 的 视觉 吸引 模式 (至 少 到 目前 为 止 是 这 样 的 )。 它 常用 于 主屏 幕 的 设计 ， 幻 
灯 卢 通 节 以 透明 层 的 方式 显示 在 实际 屏幕 内 容 之 上 ， 用 图 解法 说 明 产 品 的 使 用 方式 。 











Pulse 和 Phoster 应 用 都 用 这 种 视觉 吸引 方式 迅速 并 清晰 地 告知 用 户 ， 如 何在 程序 中 


对 内 容 进 行 导航 LR 7-11). 
sa 


| f FA ZIT Fr SRI — 28 Be te EAT eb, INSERITE BE aedi Ft HEAL AE, — 
a 旦 交互 过 程 开 始 Globe HAST ae Ae ERE) MARIAT ET 


a 
* LU 
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TAP TO MANAGE 
YouR SOURZES 


QUICK 
SECTOR E 


TAP TO PISMISS 








iN 
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wis 


1 weld teme x - 
nen Favorit 
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7-11 Pulse 和 Phoster 应 用 


7.6 首次 使 用 引导 


与 其 他 视 委 吸引 | 模式 不 同 的 征 ， 首 次 使 用 引导 不 会 在 与 其 相关 的 屏 攻 出现 之 前 显示 。 





它 征 屏幕 设计 的 一 部 分 
E- E TELE T A MZA. RA ARIS 
利用 首次 使 用 引导 来 很 快 地 吸引 住 用 户 ， 


we 





， 直 到 被 其 他 内 容 履 将、 改写 之 前 ， 或 用 户 执行 操作 之 前 ， 


e iul H,. 4] Mini Diary 和 PageOnce 都 
CASA ( 见 图 7-12). 





2010 oe 15| 5 


oe 15| 


Tap to create memo 


Save | 





| Cancel | 


7-12 Mini Diary 和 PageOnce 应 用 





GL 2L0@ a Uo We 1:52 pm 


Overview 


+ Add your 
Banks 


+ Add your 
Investments 


+ Add your 
Bills 


+ Add your 
Credit Cards 


Alerts Tips 


No new alerts 


No new articles 


9 


hw 7UMBLED 
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一 定 要 利用 图 像 或 其 他 视觉 线索 明确 地 将 首次 使 用 引导 与 其 他 内 容 区 别 开 
来 (也 就 是 说 ， 不 要 为 视觉 吸引 元 素 使 用 那些 常规 内 容 所 用 的 颜色 、 字 体 
Kh). 





7.7 ”持续 视觉 吸引 


持续 的 视觉 吸 引 是 屏幕 设计 的 一 部 分 ， 它 一 直 可 见 。Jamie Oliver Recipes 应 用 的 设 
计 建 议 利 用 横 屏 显示 方式 来 显示 额外 功能 。 不 省 是 第 一 次 看 到 这 一 屏 内 容 ， 还 是 第 
十 次 看 到 ， 界 面 提示 都 一 直 处 于 显示 状态 。Spring Pad fI HRA. BEZEBJA am 





引 告 知 用 户 ， 通 过 触摸 “+” 可 以 添加 更 多 的 笔记 内 容 COLE 7-13). 





10:28 PM E) Lh ga NT] G 11:36 am 


Curried branzino with coconut 


rice à springpad 3 


v9 


My Stuff Friends Stuff 








Recipes 


Rotate phone for images A 





10 items 


Curried branzino with coconut | 
rice Baby Prep 


9 items 


Preheat the oven to 400*F. Fill and boil Kitchen i 
your kettle. remodel 


Cut the green beans into thirds, then 
add them to a large saucepan with the 





A 














与 其 他 内 容 区 分 开 来 《也 束 是 说 ， 不 要 使 用 笛 规 内 容 所 用 的 颜色 、 字 体 大 


小 等 ) 。 


保持 持续 视觉 吸引 元 素 的 简洁 。 用 图 像 或 其 他 视觉 线索 清晰 地 将 视觉 吸引 





7.8 可 发 现 的 视觉 吸引 

可 发 现 的 视觉 吸引 与 矛盾 修饰 法 (Oxymoron) AHd— 4580. EAA — PERE EERE 
幕 人 简洁 的 前 提 下 红 励 用 户 执 行 特定 交互 操作 的 方法 。 用 户 执 行 常见 操作 动作 时 (如 
请 动 和 点 击 ) 就 能 看 到 这 种 视觉 吸引 模式 ( 见 图 7-14). 





















- 一 一 - 4 Release to refresh... 
Pull down to refresh... 


* Last Updated: 4/7/11 10:48:07 PM 

: : What's happening? 
Watching : Buying : Selling Whashagpeing? | 9 
3 | : | guo EOR Tweet | 


© Add Location 





| ;€ Reminders Oo» 








- violetzombie RT @jenlouden: 
| E Messages May we all savor our lives today 

- and shine that savoring toward 
| & Saved Searches > Libya, NZ, Iran and around the 


planet #savorserve 20s ago 
eh gens- Twitter for 





| :三 Browse jcategones 





she m m Af 


bbrylv/dZQCOz ^MS 1m aqo 











7-14 eBay 和 Twitter 应 用 


s¥ a 


Š 对 于 可 发 现 的 视觉 吸引 ， 一 定 要 取 之 有 度 ， 用 之 有 节 。 最 常见 的 这 种 视觉 
E» 吸引 模式 是 鼓励 用 户 刷新 数据 的 提示 。 
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o Regstration compiere 





常见 反馈 模式 : 出 错 (Errors). WA (Confirmation), AERA (System Status) , 


功能 可 见 性 模式 : 触摸 (Tap), rz) (Flick). d&'& (Drag). 


8.1 反馈 


与 反馈 有 关 的 可 用 性 准则 要 求 “ 向 用 户 提 供 适 当 、 


清晰 且 及 时 的 反馈 ， 这 样 用 户 才 


能 知道 他 所 执行 的 操作 得 到 了 什么 样 的 结果 ， 才 能 了 解 系统 的 运行 状态 。 反馈 的 类 


FNAB RSS, Mie] BUE RETR S. 
的 反馈 模式 如 图 8-1 所 示 。 


到 复杂 的 动画 和 界面 效 末 。 移 动 应 用 











A Email is required 
| 
Register 
Email | 
User Name 
Password 
Register 
出 错 信息 确认 





© Registration complete 





| Email | 


User Name 
Password 


7,& Submitting . . 


系统 状态 





8-1 反馈 模式 
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8.2 ”出错 信 息 

出 错 信息 应 该 以 纯 文字 的 形式 展现 给 用 户 (不 要 用 代码 )， 应 该 一 语 中 的 ， 并 主动 癌 用 
户 提 供 解 决 办 法 。 在 屏幕 上 突出 显示 出 错 信 息 ， 如 TaxCaster 和 Mint 的 设计 ， 这 样 做 比 
采用 模式 对 话 框 更 有 效 ， 因 为 后 者 有 可 能 会 遮挡 住 出 错 的 原因 ( 见 图 8-2 和 图 8-3). 





iPod = 1:26 PM = 


Cancel Create Account Done Done Accounts 


Oops. A required field needs your attention 


User ID 





Password 





Security Question 


citibank 
Last Updated: 2 minutes ago 


EH 7757 





citibank > 
Last Updated: 2 minutes aao 














8-2 TaxCaster 和 Mint 应 用 





Login Error 


Incorrect email or password. 


s is invalid. Please try again. 














8-3 Barnes & Noble Nook 应 用 ， 在 操作 表 中 显示 出 错 信息 ; Square 应 用 ， 在 对 话 框 中 
显示 出 错 信息 
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Fac "E BUE EARR AS. DRUETS De e A T RE ATL, TERA 
MAR Fa bea, AN BEE FA RESORT TATE e 


8.3 确认 


当 用 户 执行 某 一 操作 时 ， 系 统 应 该 让 用 户 对 其 
见 第 10 章 ) ， 寻 求 不 打 断 用 户 使 用 过 程 的 方法 来 提供 反 


对 话 框 之 类 的 反 模 式 ( 参 


a 
=n 


日 /Cho 


进行 确认 。 但 一 定 要 避免 造成 思春 晶 


例如 ，Whole Foods 和 Sprout 应 用 都 用 动画 来 告知 用 户 ， 革 一 项 内 容 被 添加 进 了 
列表 。 当 用 户 触摸 添加 按钮 时 ， 内 容 项 会 “下 落 ” 到 标签 栏 内 的 列表 对 象 中 C 


图 8-4 和 图 8-5), 





iPod = 3:19 PM 


Results Recipe Detail 


Ingredients Method 


Warm up the rice while you're cooking the 
vegetables, and this dish will be ready in less 
than 20 minutes. 


Nutrition 


Per serving : 200 calories (20 from fat), 2g total 
fat, 1g saturated fat, 5mg cholesterol, 210mg 
sodium, 35g total carbohydrate (7g dietary 
fiber, 4g sugar), 7g protein 








EE iPod = 3:19 PM m 


Results Recipe Detail 


Ingredients Method 


Warm up the rice while you're cooking the 
vegetables, and this dish will be ready in less 
than 20 minutes. 


Nutrition 

Per serving : 200 calories (20 from fat), 2g total 
fat, 1g saturated fat, 5mg cholesterol, 210mg 
sodium, 35g total carbohydrate (7g dietary 
fiber, 4g sugar), 7g protein 


Add to 
. Shopping List 





8-4 Whole Foods 应 用 
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ele MC 3:17 PM 


iPod => 3:17 PM 


$$ the doc says  week16 daily @ the doc says week16 daily 


high-risk pregnancies, long flights, and 
certain travel locations, so talk to your 
doctor before planning any travel. Your 
doctor may suggest ambulating frequently 
during long flights to help reduce the risk of 
blood clots. It is recommended to stop 
flying altogether after 36 weeks gestation. 


high-risk pregnancies, long flights, and 
certain travel locations, so talk to your 
doctor before planning any travel. Your 
doctor may suggest ambulating frequently 
during long flights to help reduce the risk of 
blood clots. It is recommended to stop 
flying altogether after 36 weeks gestation. 


©) To Do: Discuss vacation options 


Starting to Look Pregnant Starting to Look F 


Because of an increase 
uterus and related abd 
some women may begi 


Because of an increase in the size of the 
uterus and related abdominal bloating, 
some women may begin to show as early as 
week 11. Depending on your pre-pregnancy 
weight, your abdominal muscle tone and 
other factors, some women do not look 

¢ * -一 一 = 


the doc says 











8-5 Sprout 应 用 


Kik 应 用 中 的 内 联 反 馈 ，Android Marketplace v Fl rp By d nr FRA Ae SRI A 
不 会 打 断 用 户 使 用 过 程 的 信息 确认 方式 ( 见 图 8-6 和 图 8-7), 





| 而 EO Bulle onm 3 jdheS zm @ FG, fil) @ 1:01 


Register Register 










Pick a unique username that will 
identify you on Kik. 


theresaneil123 


Pick a unique username that will 
identify you on Kik. 


@ 


m Ez | — m E 





™ 


a5 456 


789077 « 








8-6 Kik 应 用 
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6425800 Bi FU «D 240m 
En Travel & Local 


US$0.99 


Camping Trip Planner 


Camping Trip Planner 
Jimbl 


Description 

Configurable camping planner with everything 
needed for any camping trip. Comes pre- 
populated with more than 225 camping items. 


More 
Version 3.0 81.86KB 
1,000-5,000 downloads 91 ratings 
@ vos rv @ 2027 





ggr cne 0 B FT @ 2:40 
E" Travel & Local 


Camping Trip Planner 


Camping Trip Planner 
Jimbl 





Allow this application to access: 


Storage 
Modify/delete SD card contents 


More 





8-7 Android Marketplace 应 用 


有 了 时， 
图 8-8)。 


应 该 突出 显示 确认 信息 的 操作 ， 比 如 当 用 户 提 交 信 息 或 菜 项 交易 结束 时 L 





O4 E09 BAMA 11:257 


We sent an email to 
theresaneil@gmail.com 





You can continue with the checkout, and we 
will save the billing and shipping information 
to your account. 


In the future, you can checkout quickly by 
simply confirming the Security Code for the 
Credit Card on your account. 








8-8 Best Buy 和 Discover Card 应 用 


DISCOVER “x0 


Money Messenger 


12:29 PM = 


Back 








POWERED BY 


PayPal 


Discover Card Ending 4332 


Send Money History 


Your money has been sent! 


e Your payment has been delivered and a 
notification will be sent by PayPal to 
James Young at 


+ It's also a good idea to contact the 
recipient directly so they will know to 
expect the money. 


e You will receive an e-mail confirming 
this transaction. 


Transaction Date: 
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当 用 户 执行 某 项 操作 时 ， 提 示 确 认 信息 ， 但 不 要 打 断 用 户 使 用 产品 的 过 程 。 





8.4 系统 状态 


E 提 升 用 户 对 软件 的 信任 度 。Netflix 应 用 告知 用 户 “ 正 在 加 
AR Pg En ， 而 不 是 把 用 户 蚊 在 那里 ， 因 为 那样 用 户 会 误 以 为 程序 卡 住 了 。 
你 可 以 用 简单 的 信息 、 动 态 指示 如 、 进 度 条 或 者 以 上 元 素 相 结合 的 方式 告知 用 户 
系统 的 状态 。 系 统 状态 信息 可 以 显示 在 用 户 当 前 所 在 页 面 ， 如 Netflix, Android 
Marketplace 和 PageOnce 的 设计 ， 也 可 以 用 履 凋 层 来 显示 ， 如 TaxCaster 的 做 法 
( 见 图 8-9 和 图 8-10). 





9:51 PM 


Gi HGIa:@ ‘bh; a ull Q3) 3:13 pm 


m Featured 


Instant Queue 





um OpenBuilding... Godzilab Inc 





rex Free  *r*edesek Free 
PhoneWea... — Evernote 
SBSH Mobile 5... Evernote Corp. 
Leg d e $3.99 reed: Free 
Due Today — . News360 
Lakeridge Sof... for Phones 
News360 LLC 
week $2.99 wkkweth Free 
The — . Herman the 
Economist Hermit 
The Economis... Capcom Mobile 
kikk Free e ek $0.99 
— . YP Yellow - . Localicious 
Pages WhitePages 
Yellowpages.c... 
kitti Free ede Installed 


= Loading... 


Instant Queue 
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Payments due 


-$5,400 


Creating Account 
This may take a moment... 


min -$1,045 





dri Wve 


-.| Investments E hr your computer. 


$35,000 





= 
Es 





A|s|p|ric|n] J]k].. 


Alerts 





| Tax center 


Tax help 
is here! 


2 new alerts 
10 total 





Ez ixic|vis|Ni = 











8-10 PageOnce 49 TaxCaster 应 用 


Kayak 用 进度 条 显示 搜索 航班 所 得 结果 。 注 意 这 一 设计 方案 在 iOS 系统 和 Android 
系统 中 的 差异 (OLA 8-11). 








nm 


AUS to RIO Mon, Oct 03, 2011 - Mon, Oct 17, 2011 





Searching flight sites... 








8-11 Android 和 iOS 系统 下 的 Kayak 应 用 


对 于 可 能 会 持续 较 长 时 间 的 进度 ， 提 供 一 个 “取消 ”按钮 ， 比 如 SXSW 应 用 对 于 
下 载 新 日 程 安排 时 的 设计 。Adidas miCoach 应 用 预先 告知 了 用 户 所 要 下 载 文件 的 大 
小 ， 但 也 提供 了 一 个 “取消 下 载 ” 选 项 ( 见 图 8-12). 
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1:10 PM LN] june 4, 2011 @ 





T el) 49 11:51 pm 


aj) 





AAA 
AN 
lk a ! 
if É | E 
Welcome to SX: SW Fe nolich [11&1 Ferr 
Please hang on à moment while we J Fetchin g... 12% 
download the ee information. Dew es ea aca 
(A network connection is required.) miCoach is now downloading 


v. d = the coaching voice package: 
gc English (US) Female. 


Downloading new schedule 








8-12 SXSW 和 Adidas miCoach 应 用 


s¥ a 


告知 用 户 系 统 的 状态 。 为 可 能 会 持续 较 长 时 间 的 操作 提供 “取消 ”选项 。 


8.5 功能 可 见 性 


功能 可 见 性 指 某 个 对 象 向 用 户 呈 现 出 的 可 执行 操作 ， 例 如 抽 民 的 拉手 或 门 上 的 把 手 。 
软件 中 的 功能 可 见 性 包括 : 拖 动 手柄 (Drag Handle), AAIR (Page Peel), i& 
如 按钮 和 请 块 之 类 的 三 维 控制 对 象 等 。 





移动 应 用 也 可 以 采用 诸如 此 类 的 模式 。 图 8-13 是 触摸屏 UI 设计 中 常见 的 功能 可 见 
性 模式 .。 
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ui HT) dI 














触摸 滑动 46, 9, 








8-13 功能 可 见 性 模式 


8.5.1 触摸 
斜 角 和 阴影 等 视觉 设计 技巧 能 让 界面 元 素 看 上 去 是 可 触摸 的 。Pictory 和 GroupMe 
都 利用 了 这 类 效果 ， 其 界面 中 的 控制 项 很 明显 是 可 触摸 的 ( 见 图 8-14)。 








Enter your name and email 


| Theresa Neil | 
theresaneil@gmail.com e 


Finish 


a|w|e[n|r| v|u] rjojP 





A|s|p]ric]H|»]KiL 
Sz |xjc|viB|N| ve. 


return 


Howsto user? 











8-14 Pictory 中 的 三 维 按钮 和 GroupMe 中 带 有 立体 效果 的 按钮 和 输入 框 
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这 种 效果 一 定 要 用 得 恰到好处 ， 这 一 点 非常 重要 。Yelp 的 “搜索 ”按钮 就 有 些 差 
强人 意 ， 表 单 中 的 所 有 元 素 看 上 去 都 好 像 是 按钮 ， 连 输入 框 的 标签 都 不 例外 (UL 
8-15), 











vancel Filter / Sort Search 





Sort Results By 


Highest . 


Best Match Distance Bated 





Carbohydrate § Carbohydrates 


Narrow Results By 


= 





Number of Points 


Neighborhoods 


Search 











图 8-15 Yelp 的 搜索 按钮 不 太 像 按钮 〈 左 图 ) ， 所 有 的 标签 好 像 都 是 可 触摸 的 〈 右 图 ) 


» 8 


n 用 常见 的 视觉 效果 来 暗示 可 触摸 的 控制 项 。 一 定 要 小 心 谨慎 地 使 用 三 维 效 
、 果 ， 泛滥 的 阴影 和 斜 角 效果 会 降低 可 读 性 。 


8.5.2 滑动 
有 很 多 种 方式 可 以 告知 用 户 ， 还 有 更 多 的 内 容 可 以 浏览 。iOS 中 的 页 面 指示 器 一 
一 些小 点 一 -已 经 广泛 应 用 于 网 络 和 移动 应 用 ( 见 图 8-16) « 


另 一 种 方式 是 在 屏幕 边 绿 显示 其 余 内 容 的 一 部 分 ， 在 屏幕 底 端 或 是 两 侧 边缘 都 可 以 。 
这 种 设计 能 鼓励 用 户 清 动 屏幕 ， 查看 更 多 内 容 ( 见 图 8-17). 

















全 虹口 QQ@ BHM) G11:01m 


Badge Collection 


| 


YOU \ 





free time is a powerful 
calendar and scheduling tool. 


take a look at all it can do for you 
by flipping through the next 
few pages. 











8-16 FreeTime 和 Audible 应 用 





„ill T-Mobile => 1:53 PM m. „il. AT&T M-Cell = 12:52 PM 


7" 


72 piics from 17 users 


f = - = 
e The Best Food Ever. 2 4 = Timeline 


cellguru 4m 
Review and Giveaway: WOWee One 
Portable Phone Speaker 


thecellularguru.com/2011/04/13/rev... 
了 id LA P 





gue _ ss 
Lu be 2a. 
~ 3 


d 


~ 









via @TheCellularGuru 


reneritchie om 
@philnickinson When are we going to 
see @AC_Llioyd's girlfriend? (The one 
he stole from Capt. Kirk?) 


BE fo 











jonfingas 9m 
(C reneritchie "| mean it! Hounded by 
all you people wanting, y'know, facts." 
ti Retweeted by reneritchie 


@ 2 | kaseyisnotw 











8-17 Piictu XU TweetBot 应 用 
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另 一 种 不 太 常 见 的 方法 是 使 用 滚动 条 。 通 过 点 击 滚 动 条 的 其 一 区 域 ， 用 户 可 以 迅速 
跳 到 对 应 的 内 容 处 。Roambi 在 其 界面 右边 显示 了 一 个 几乎 是 透明 的 滚动 条 ， 用 绿色 
点 表示 当前 所 处 的 位 置 。Skype 采用 了 基 于 字母 表 的 演 动 条 ， 这 种 方式 常 凡 于 iOS 
系统 下 的 应 用 〈 见 图 8-18)。 











Sales by Region 


iPod = 9:36 AM 一 
E 


Groups All Contacts 


Central 














人 Contact requests P 
FDA PR a € 

Carona Roach Cantor m P E 

Cocoa Outlets e Q Angie 4 
———— 一 

Cape Coral Outlets Centrais 7 

xX) Constantin Moldov... 

Boynton Beach Outlets e A 








+A PDO 





X; Enrico Berti 


aN<x = 














8-18 Roambi 的 Cardex 模块 和 Skype 应 用 


» 8 


^ 通过 页 面 指示 器 ， 或 显示 其 余 内 容 的 一 部 分 来 告知 用 户 ， 滑 动 屏 幕 可 以 发 
， 现 更 多 内 容 。 不 要 使 用 反应 过 慢 的 滚动 条 。 


8.5.3 Hak 
拖 归 手柄 表明 某 个 内 容 项 是 可 移动 、 可 重新 布局 或 可 重新 排序 的 。 它 在 类 似 于 
Yahoo Finance 和 Roambi 应 用 中 的 列表 设计 中 起 到 了 很 好 的 效果 (ULE) 8-19), 




















请 块 也 依赖 拖 动手 柄 实现 功能 〈 见 图 8-20), Z0 6.2 市 的 设计 。 


D 拖 动手 柄 的 图 标 一 定 要 易于 识别 。 为 拖 动手 柄 设计 一 个 突出 的 效果 ， 以 此 
。 告知 用 户 这 一 对 象 是 可 操作 的 。 














5:54 PM 


Stocks 


Cancel Columns 


Key Column [Drag and Drap) 
Choose and Order Golumns 
^ | 

DJI 


Dow Jones Industrial Average 


AIXIC (NASDAQ) 
NASDAQ Composite 


^(GSPC 
S&P 500 INDEX,RTH 


AAPL (NASDAQ) 


Apple Inc. 


GOOG (NASDAQ) 


(Google Inc. 


YHOO (NASDAQ) 


Yahoo! Inc. 


^FTSE (London) 
FTSE 100 


| | 


YAHOO! FINANCE 


Vv) Q1 2008 Market Value (M) 


Profits as % of Sales 


Rev % change from 2006 


Profits (M) 


Revenue (M) 


Profits % change from 2006 


Assets (M) 


| Stockholder's Equity (M) 


2002-2007 Total ROI 


Check All Uncheck All Reset 








8-19 Yahoo! Finance 和 Roambi 应 用 
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| Reckless EN : 


" | Sales by Product Line : Pet Supplies 
(Unabridged) D w M 
By Comelia Funke 


Narrated by Ellict E : $112,990 
Hill Ve 


MAN 7 











8-20 Audible 和 Roambi 应 用 
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eB 9 = 





帮助 


常见 帮助 模式 : 使 用 说 明 (How To)、 界 面 元 素 说 明 (Cheat Sheet)、 使 用 向 导 (Tour). 


移动 应 用 程序 应 该 易于 用 户 学 习 ， 让 用 户 快 速 掌 握 其 使 用 方法 。 但 是 ， 无 论 应 用 如 
何 与 人 的 直 完 相符 ， 邦 知 要 提供 一 些 帮 助 。 第 见 的 帮助 模式 如 图 9-1 所 示 。 

















| | 
| | 
Seorch 
1 
2 
Browse Help Topics 
Top Questions 
- a Bug : 1 
Give Feedback 
H ecd 4 > 
2) destnphon 
3) desCnption 
4) destnption 
使 用 说 明 界面 元 素 说 网 A aE 











图 9-1 SULTSBI X 


9.1 使 用 说 明 

使 用 说 明 用 来 解释 该 如 何 使 用 应 用 。 它 可 以 只 占用 一 个 页 面 ， 如 Phoster 和 Pictory 
的 设计 (ULE 9-2)， 也 可 以 作为 稍 庞大 的 帮助 系统 的 一 部 分 ， 如 Awesome Note 的 
设计 ( 见 图 9-3), 








a 


are ae ERE} 


Select A en 

>Import photo (BE | 

e nt 
age Ad joe 


Tau 


_SAVETER SHARE fd 
Usa @+ 































Basics 

Read Me Add New Note 
Today To-dos 

. Number of Notes 
Troubleshootings View Calendar 
c My idea 

General (Main Screen) Q Wise sayings Passcode 

Protected 
= xX Tr | Diary Folder 
Organizing Folders LJ 


opping Today To-dos / 
Number of Notes 
m. To Do list | 


Organizing Notes 


Edit Folder List 
Add Folder 





Working with Notes 


Auto/Lock 














9-3 Awesome Note 应 用 
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在 使 用 说 明 中 综合 使 用 屏幕 截图 、 插 图 和 文本 等 多 种 形式 。 





9.2 界面 元 素 说 明 

界面 元 和 到 说 明 以 较为 少量 的 信息 介绍 屏 从 上 的 所 有 界面 元 到 。Tap’n’ scratch 为 此 单 
独 设计 了 一 个 页 面 ， 而 Android 系统 下 的 Swype 则 采用 了 对 话 框 的 方式 ， 参 见 第 7 
= (ILAI 9-4) 。 





June4,2011 O @ B 2 Bill C9 4:265» 





A new way to 
type 





mS E Just trace a 
scd f g h through e Choose Background o Add Cul to Image 


the letters of 
a word o Choose image o Choose Image Filter 
o hodie PME o Move Objects Up or Down 
Add Text 
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9-4 Android 系统 下 的 Swype 应 用 和 Tap’n’Scrap 应 用 


» 2j 


X) 界面 元 素 说 明 是 优良 设计 不 可 或 缺 的 部 分 ， 但 它 可 以 让 用 户 很 快 习惯 产品 
。 的 使 用 方法 ， 也 能 提高 使 用 效率 。 


9.3 ŁAD 

使 用 向 导 或 许 是 在 应 用 内 最 好 的 提供 帮助 的 方法 。 程 序 应 该 在 用 户 首次 使 用 时 提供 
可 导 ， 并 且 人 允许 用 户 在 后 续 的 使 用 过 程 中 随时 访问 ( 见 图 9-5 和 图 9-6)。 更 多 关于 
使 用 向 导 的 内 容 和 示例 参见 第 7 章 。 
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Triplt organizes your 
travel automatically 





Trip to Boston 
Aug 19, 2010 - Aug 31, 2010 
Thu, Aug 19 | ` 
-05 AM San Francisco to Bo... 
Eb won mera o o free time gets data from your local 
— calendar & shows you times 
a MORIA NA” when you are free. 


<ih., Selected 





by selecting blocks of free time, you 
can share your availability with others 








9-5 Triplt 40 FreeTime 应 用 
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1. GET BETTER 4. SYNC 
Meet your goals and get better for your sport with To download your new plan or workouts, just press 
miCoach! Audible coaching and color intensity Sync in the miCoach Mobile app. 


zones guide you through your workout--it's like 
having a personal trainer by your side. 


eS 








ente s 





9-6 Adidas miCoach 应 用 











虽然 Valspar 应 用 的 快速 使 用 向 导 (Quick Start Guide) 极 具 吸引 力 ， 且 充满 了 富有 
价值 的 内 容 ， 但 用 户 可 能 无 法 “快速 ”学 会 如 何 使 用 产品 ， 因 为 这 部 分 有 超过 12 页 


的 内 容 。 尽 量 把 癌 导 部 分 的 内 容 降低 到 6 页 以 下 (OLEI 9-7). 





valspar paint™ 





quick start guide 


This is where you can explore Valspar colors. 
Tap on a color family for color options. 


back to home page 







valspar paint 


explore colors —— search for colors 
ESAE pick your preferred 
select a color family store between 


bà id bá lowe's or 
Lid ludi independent 
lui id ids bud retailers 

| double tap one of 
m "t "m ld ine color families 
i Li to go to the next 
- iis aad d id screen 





swipe for more ub 











9-7 Valspar 的 快速 使 用 向 导 并 不 “快速 ” 





全 。 疝 导 的 设计 应 该 简短 、 充 满 吸 引力 。 





使 用 向 导 所 包含 的 应 该 是 应 用 中 最 关键 的 功能 ， 最 好 从 用 户 的 使 用 目标 开 
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肥 模 式 





常见 反 模 式 : 标新立异 (Novel Notion) 、 隐 喻 错位 (Metaphor Mismatch), Ze 
对 话 框 (Idiot Boxe), KÆ BI (Chart Junk)、 按 钮 海 (Oceans of Button), 


Th Are PRE? 维基 百科 的 定义 为 : 


反 模 式 也 称 为 “陷阱 ”(Pitfall) ， 通 常 指 对 于 某 些 问题 所 采取 的 没有 实质 性 革新 的 、 
糟糕 的 解决 办 法 。 人 们 已 将 其 作为 界面 设计 的 一 种 模式 进行 了 研究 ， 以 便 在 后 续 的 
设计 中 避免 犯 同样 的 错误 ， 也 希望 在 对 无 法 工作 的 系统 进行 调查 时 也 能 识别 出 此 类 
模式 。 这 一 术语 源 自 计算 机 科学 ， 很 明显 是 受到 “四 人 组 ”的 Design Patterns 一 
书 的 影响 ， 该 书 介 绍 了 一 些 高 质量 编程 的 方法 。 

一 一 维基 百科 ， 反 模式 


与 软件 设计 中 的 反 模 式 类 似 ， 以 下 有 反 模 式 也 是 界面 设计 中 要 避免 的 第 见 设计 陷阱 。 


10.1 标新立异 

标新立异 式 设计 的 目的 在 于 求 新 、 与 众 不 同 、 突 出 创意 或 创新 。 但 大 部 分 时 候 ， 这 
种 做 法 是 错误 的 ， 用 户 难 以 理解 ， 产 品 很 难 使 用 。BUI* Gallery 的 创始 人 Richard 
Gunther 关于 这 一 反 模 式 的 描述 为 :“ 你 通 稍 能 区 分 出 移动 应 用 开发 团队 是 否 具 有 传 
绕 网 络 应 用 开发 的 背景 。 这 些 团 队 篆 稼 会 演 试 把 卓 有 的 交互 模型 ?| 入 到 新 的 应 用 平 
台 ， 并 设计 一 些 非 标 准 UI 元 素来 凸显 他 们 的 “创意 。 


标新立异 式 的 反 模 式 在 移 应 用 中 随处 可 见 ， 从 主要 导航 到 个 别 的 控件 、 交 互 方式 或 
手势 设计 。Weight Watchers 应 用 就 包含 有 许多 标新立异 式 的 反 模 式 ， 最 明显 的 莫 过 














注 1: 指 《 设 计 模 式 》 一 书 的 4 位 作者 Erich Gamma, Richard Helm, Ralph Johnson fH John Vlissides。( 译 者 注 ) 
注 2: 参见 http://www.thebuigallery.com/。( 译 者 注 ) 
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于 主导 航 的 设计 。 其 开发 团队 创造 出 了 一 个 目 定 义 菜 单 容 颖 ， 其 中 包含 有 跳板 式 的 
主导 航 (OLA 10-1). 





Menu 


Instructions & Ingredients 


Menu a 














10-1 Weight Watchers 应 用 


这 种 反 模 式 非 常 粳 糕 ! 产品 腔 肿 得 难以 使 用 ， 界 面 元 素 的 组 织 十 分 digi ， 那 些 能 把 
访问 者 变 成 用 户 的 重要 产品 功能 隐匿 不 现 〈 在 跳板 式 导 航 的 第 二 页 ) 。 虽 然 我 能 明白 
Weight Watchers 的 用 意 ， 但 如 果 他 们 采用 了 标准 的 导航 模式 .、 ess 
应 用 可 能 会 更 容易 上 手 ( 见 图 10-2 和 图 10-3)。 




















Weight Watchers | Login | Weight Watchers Log In 
Cheese Fries P Cheese Fries o 
eooooooo eooooooo 
m WO bad -. 
“Recipes” Cheat Sheets ER ity Meeli ings More Mee! 














10-2 选项 卡 式 的 菜单 选项 ， 线 框图 (28); 可 滚动 的 选项 卡 选项 ， 线 框图 (6B) 
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Weight Watchers | Login (= Featured Recipes 9 


: About Weight Watchers 


| Success Stores 


: Expert Articles 


| Meeting Finder 


| | Featured Recipes 
Cheat Sheets 


Nene Cheese Fries B 


Ww Shopping List ESGOSUISS 


© B c3 


10-3 列表 式 的 菜单 选 页 ， 线 框图 ( 左 图 ) ; 内 部 屏幕 的 概念 ( 右 图 ) 


iPhone 上 的 Fly Delta 应 用 的 菜单 就 很 不 同 寻常 ， 但 现在 它 已 被 另外 一 种 “ 标 新 六 
异 ” 的 反 模 式 取代 一 一 用 户 (执行 渭 动 操作 后 ) 会 发 现 有 页 脚 内 容 ， 其 中 包括 有 
“主页 面 ” 按 钮 和 一 个 指向 “Contact Us" 的 链接 ( 见 图 10-4)。 
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Back 
anti~ 
Pattern 
Sea: Delta Schedules 
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Direct Flights Only 
To 
Departing from 
Direct Flights Only W 
Flying to 
Leaving 








r / S 


Leaving Aug 21,2011 LS Anytime v | 
k e- 
Today - 9pm-3am 了 


Search 
— À— 











ft Home (3) Need assistance? Contact us. 








10-4 Fly Delta 先前 (2B) 和 新 的 〈 右 图 ) 菜单 设计 
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ANAT dn oc PER — DOE RE UI I8] EF TE, PREA iOS 选项 卡 也 能 起 到 很 好 的 
RA. Contact Us 本 应 该 显示 在 页 面 的 右上 角 ， 而 不 古 “ 哄 ”在 页 脚 处 。 这 种 菜单 
设计 能 称 得 上 走 “ 创 新 ， 吗 ? 完全 不 能 ， 它 只 会 让 应 用 更 难 用 。 








有 时 ， 富 有 天 赋 和 经 验 的 设计 团队 能 充分 利用 技巧 把 “标新立异 ” 式 的 反 模 式 变 得 更 
可 用 一 些 。Gowalla 的 设计 师 将 标准 的 选项 卡 菜 单反 其 道行 之 ， 设 计 出 了 漂亮 且 可 用 的 
菜单 。Forecast 试图 模仿 Gowalla 的 设计 ， 但 结果 却 是 画 虎 不 成 反 类 犬 (WE 10-5)。 





All Friends Nearby 


Forecasts 





anti~ 


ma) Zev Green | 了 P ter, s Coffee E 
> 15 Metrotech Center y ing wi ee - 


Friends' Activity 
Eric K. > Cheer Up Charlie's 


Mike Schleif 
CNN Coffee A 1104 E 6th St 


7:00 PM & + 
Robert Holmes A.T. F. > Cheer Up Charlie's 
Zagat Ti 
pA NM 1104 E sth St 



























7:00 PM lg i 





Mike Pearson 

Disney Magical Express 
it's a small world after all 
http://picplz.com/zg2R 


Eric K. > Alamo Drafthouse Cine... 
Justin Timberlake singalong!!!! 
10:15 PM * 




















10-5 Gowalla 和 Forecast 应 用 





Forecast 中 只 有 两 个 风格 化 的 选项 卡 ， 用 户 必 须 仔 细 观 察 才能 确定 自己 当前 看 到 的 是 
Forecasts 还 是 Check Ins 的 信息 。 视 觉 设 计 并 没有 起 到 应 有 的 效果 ，Check Ins 选项 卡 
的 凹 进 效 果 看 上 去 好 像 用 户 选 择 了 它 ， 但 其 实 不 然 〈 见 图 10-6)。 


一 个 人 徇 单 的 触发 栏 就 能 揭 开 用 户 的 困惑 。 实 际 上 ， 在 仔细 了 解 过 这 于 应 用 的 使 用 流 
程 之 后 ， 我 认为 程序 应 该 根据 时 间 的 先后 关系 ， 以 单独 的 “活动 ”选项 卡 显示 用 户 
到 底 选 择 的 是 Forecasts 还 是 Check Ins， 这 才 是 最 佳 的 设计 方案 。 这 样 的 设计 需 
为 Forecast 建立 一 个 用 户 可 识别 的 Forecast 图 标 ， 用 以 暗示 好 友 是 预报 ， 还 是 已 到 
TEDHA. 


Forecast 也 设计 了 一 个 自 定义 选项 卡 栏 ， 但 却 有 点 简陋。 这 类 自 定 义工 具 栏 非常 
适合 那些 只 包括 一 个 主要 的 调用 操作 的 应 用 ， 如 把 内 容 发 布 到 Pinterest 或 通过 
Instagram 分 享 。 实 际 上 ，Forecast 只 包括 两 个 主要 的 操作 一 一 Forecast fll Check Ins 
( 见 图 10-7 和 图 10-8 ) 。 
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iPod & 3: 8:00 PM om Fou 
Setup 


How do you want to receive messages? 


Push messages are free and 
use your data connection 


Save Groups to Contacts on. | 


NEARBY 
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~ 
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foursquare 


WORLDWIDE 


Mari Sheibley 
New York Health & Racquet Club 
3 hours ago 


Susan L. @ foursquare HQ 
East Village 
27 seconds ago 








See who else you 


Sync Contacts 





Courtney L. @ Von 
3 Bleecker St (btw Lafayette & 


Bowery) 
4 mins ago 





know is using GroupMe. 


四 | agree to the Terms of Service 
and the Privacy Policy 


图 10-6 凹 进 风格 通常 表示 用 户 已 选择 的 选项 


Nina Y. @ foursquare HQ 
East Village 
5 mins ago 


Scott B. @ World Maker Faire... 
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Me :: Progress Coffee 
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7:00 PM «f Check In 
Friend's Activity 
Erik K. :: Cheer Up Charlie's 
1104 E 6th St. d 
7:00 PM 
A.T.F :: Cheer Up Charlie's 9 
1104 E 6th St. 
7:00 PM 
Nora Kyle :: Cheer Up Charlie's © 
1104 E 6th St. 
7:00 PM 
Mason D. :: Cheer Up Charlie's © 
1104 E 6th St. 
7:00 PM 
EB n o a4 
Activity - Friend Places Me More 








10-7. 采用 IOS 系统 标准 标签 的 线 框图 
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10-8 Pinterest X] Instagram 应 用 


风格 统一 的 “Add Forecast" 
完成 软件 的 第 一 次 使 用 。 另 一 种 方案 
定义 工具 栏 内 (ILAI 10-9), 


按钮 应 该 起 到 很 好 的 作用 ， 
是 设计 “Forecast” 按 钮 的 图 标 ， 并 将 其 


吸引 新 用 户 对 其 进行 操作 ， 


a 














Forecast A + | 





>- 
Forecast 4= 





Forecast where you're going 
so your friends can meet you 


there 








Friend's Activity 


Erik K. :: Cheer Up Charlie's 


ti — St. 
Checked In 7:12 PM 








Erik K. :: Cheer Up Charlie's 


1104 E 6th St. 
Cnecked In 7:12 PM 


« 





A.T.F :: Cheer Up Charlie's 


NS St 





Nora — Cheer Up Charlie's 
1104 E 61 


Forecast o" 








A 
A= 
a= 
AT 
=. 


Mason oa : Cheer Up Charlie's 
1104 E 61 
00 A 
Friends Places Me More 











4 
A.T.F :: Cheer Up Charlie's a 
1104 E 6th St 
Forecas! 7:00 PM 


Nora Kyle :: Cheer Up Charlie's 
1104 E 6th St 
Forecast 7:00 PM 


Forecast where you're going 
so your friends can meet you 
there 








10-9 ”能 吸引 用 户 的 Add Forecast 按钮 (AB), 


市 有 目 定 义工 具 栏 的 备 选 方案 


( 石 图 ) 
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a E, MPABM, Bee AEN Tih, MART I4 H 


re 
< 


Va 
如 来 你 想 要 对 应 用 进行 创新 ， 请 把 关注 后 放 在 主要 的 功能 和 所 提供 的 服务 


定义 控制 项 ， 一 定 要 对 其 进行 严格 的 测试 和 修正 ， 最 终 达 到 可 用 性 的 要 求 。 


10.2 ”隐喻 错位 

这 种 反 模 式 是 由 于 界面 设计 采用 了 错误 的 隐喻 对 象 而 造成 的 。 隐 喻 错位 可 能 会 发 生 
在 较 低 级 的 层面 ， 比 如 某 个 控制 项 或 图 标 使 用 不 当 ; 也 可 能 会 出 现 于 较 高 的 层面 ， 
如 应 用 的 概念 模型 与 用 户 的 心理 模型 不 匹配 。 





10.2.1 控制 错位 
Calorific 应 用 是 最 典型 的 控制 错位 的 例子 ， 它 提供 了 一 个 年 龄 列表 ， 而 不 是 日 期 选择 器 。 
另 一 个 例子 是 Easy Point Calculator， 所 有 的 标签 看 上 去 都 像 按钮 一 样 ( 见 图 10-10)。 





3020 € BH € 2:06 pm 





en m) & 5:12 pm 


Activity Daily Allow 


48 yrs. old 


Carbohydrate § Carbohydrates 
— CIN 
UU CNN 


49 yrs. old 


50 yrs. old 


51 yrs. old 


e 


^ 


52 yrs. old 


Number of Points 


53 yrs. old 











10-10 Calorific 和 Easy Point Calculator 应 用 


What To Expect’s Baby Tracker 应 用 的 导航 控制 方式 和 用 户 的 预期 也 存在 隐喻 错位 。 
乍 看 之 下 ，WTE 包含 有 4 个 “Baby Tracking” 的 选项 和 一 个 “View Log” 按 钮 
( 见 图 10-11)。 
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iPod = 10:26 PM E iPod = 10:28 PM = 
Baby 


WHAT TO EXPECTcom tracker WHAT TO EXPECTcom — tracker 


Tracker Groups Development » -- Diapers + 





Tracking: Baby 1 > Tracking: Luckenbach 
Pick an activity to track, or view the Log. 


[te = 
Sleeping Feeding yi & 
LH n - 





Save 





Diapers Vaccinations 


View Log v» 











10-11 WTE 的 Baby Tracker 应 用 


Baby Tracker 标题 栏 下 面 有 一 个 粉红 色 的 过 滤器 ， 其 中 包含 了 所 有 的 选项 。 虽 然 这 
种 过 滤 控 制 能 很 好 地 应 用 于 ACL 和 News360 之 类 的 应 用 中 〈 见 图 10-12), 但 用 作 
主要 导航 却 并 非 明 智之 举 。 





iPod = 4:44 PM GE 12:14 AM 
At OT Pp Alte ALL so 


news 


Top Stories 


All Friday Saturday Sunday 





XBox > 


School of Seven Bells 
Friday - 12:30 PM © > 
LIVESTRONG Stage 


Medeski, Martin & Wood 
| Friday - 2:30 PM © > 
LIVESTRONG Stage 


Coheed and Cambria | im. News -Times 
Friday - 4:30 PM @> l 
LIVESTRONG Stage 





Thievery Corporation 
Friday - 6:30 PM 


IVESTRONG Stage 





Top News 








10-12 ACL 用 过 滤器 控制 所 显示 的 内 容 ，News360 用 过 滤器 控制 所 显示 的 新 闻 
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我 的 儿子 只 有 3 周 大 时 ， 我 安装 了 What To Expect 应 用 ， 当 我 看 到 那 4 Pee 
时 立刻 就 把 它 删 摊 了 。 


10.2.2 ”图标 错位 
图 标 错位 是 另 一 种 隐喻 错位 的 反 模式 。 人 们 总 是 期 望 自己 熟悉 的 图 标 能 提供 特定 的 
功能 。 当 用 户 以 自己 不 熟悉 的 方式 使 用 熟悉 的 图 标 时 会 产生 疑惑 。 


Weight Watcher 的 应 用 的 右上 方 有 一 个 iOS 系统 风格 的 按钮 。 通 和 党， 它 的 作用 类 似 
于 发 送 邮件 或 发 送 到 Facebook, 74 RÆ fl Favorites 和 Add to Shopping 选项 之 后 
非 溃 慨 讶 。 使 用 标准 的 工具 栏 或 许 能 让 这 秋 应 用 更 符合 人 们 的 使 用 习惯 ， 也 是 实现 
Favorites 和 Add to Shopping 这 两 项 功能 的 更 好 方法 (ILE 10-13 ) 。 





= Featured Recipes 9 
3 
Cheese Fries 
Servings; 4 
Instructions & Ingredients Cheese Fries © 


eooooooo 


Menu A | @, c3 

















10-13 按 下 “发 送 ” 按 钮 之 后 看 到 的 是 意料 之 外 的 选项 


10.2.3 心理 模型 错位 

我 以 前 所 在 公司 设计 的 一 个 票务 处 理 系 统 息 我 最 乐于 谈论 的 此 类 反 模 式 的 和 案例 。 当 
我 们 遇 到 技术 问题 时 ， 比 如 瑟 记 密码 或 笔记 本 电脑 假死 ， 我 们 必须 登录 系统 ， 剖 览 
问题 列表 ， 选 择 回 题 ， 然 后 将 其 加 入 购物 车 再 碍 看 结 末 。 对 于 零售 行业 来 说 ， 这 种 
设计 非常 优秀 ， 但 它 完 全 不 适合 用 来 做 技术 支持 类 的 应 用 《〈 见 图 10-14). 














Help Desk 


Add your problem(s) to the cart, then checkout: 







(vi Laptop won't boot 
C) Monitor is dead 
C) Battery is dead 
O Forgot password 


Add to Cart 











10-14 Help desk 应 用 


再 来 看 看 ABC News HJ iPad MH. “EFA 7S HRER DO vU ELENA? 当然， 如 果 新 
团 来 自 于 某 个 特定 的 地 理 位 置 ， 这 种 方法 有 其 优势 所 在 。 但 情况 并 非 如 此 。 实 际 上 ， 
ABC News 应 用 内 的 地 球 已 与 我 们 所 在 的 这 个 星球 没有 任何 关系 。 它 只 是 一 个 转 个 





不 停 的 球体 ， 用 户 阅 读 起 来 都 困难 ， 更 别提 说 览 信 息 了 ( 见 图 10-15)。 








Seeking Cheap Travel? 
Dubai at a Discount 


/ y 
- r lj 
z] / ms LN 


— 
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从 图 标 到 控件 再 到 概念 模型 ， 都 可 以 通过 隐喻 提升 用 户 体验 。 但 不 恰当 的 
隐喻 只 能 让 应 用 难以 理解 、 难 以 使 用 。 





10.3 愚蠢 的 对 话 框 
在 Alan Cooper 的 About Face 3 一 书 中 ， 他 这 样 描述 道 : 


只 有 当心 理 状态 与 工具 合 而 为 一 时 ， 人 们 才能 有 更 高 的 工作 效率 …… 没 有 足够 的 借 
口 就 打扰 用 户 的 工作 ， 无 异 于 愚 夸 地 迫使 用 户 暂停 ， 这 是 最 具 破 坏 性 的 行为 。 


Bill Scott 根据 “愚蠢 地 迫使 用 户 和 暂停 ”的 概念 ， 提 出 了 “愚蠢 的 对 话 框 ” 这 一 反 模 
式 。 我 最 常 提 起 的 这 类 反 模 式 是 Photobucket 应 用 的 注册 表单 。 在 我 煞费苦心 地 十 
完了 10 项 内 容 ， 然 后 点 击 那 个 大 大 的 、 绿 色 的 、 和 带 有 了 Agree, Sign Me Up! 标签 的 
按钮 时 ， 程 序 弹 出 了 图 10-16 所 示 的 对 话 框 。 





Abu cou © GO, RB 7:41-m June4,2011 @ BAMA 1121» 





©) Item Added To Cart 


© Create account 


Sku 2343184 has been added 
to cart 


| Go To Cart | | Continue Shopping | 


Are you sure? 








10-16 Photobucket 的 注册 模块 和 Best Buy 应 用 


注 1: 该 书 的 中 文 版 名 为 《交互 设计 精髓 》， 由 电子 工业 出 版 社 出 版 。( 译 者 注 ) 











反 模 式 | 173 


哦 ， 当 然 ! 我 确定 ， 我 就 是 想 创 建 账 户 ， 这 也 征 我 为 什么 填 完 了 所 有 要 填 的 内 容 ， 
并 点 击 那个 大 大 的 、 绿 色 的 按钮 的 原因 。 


Best Buy Hise ite kick boe: 你 已 将 一 个 物品 添加 到 了 购物 车 。 虽 然 
破坏 性 没有 那么 大 ， 但 更 有 效 的 做 法 是 仅 系 加 购物 车 内 物品 的 数量 。Zappos 的 做 法 
就 高 明 一 些 ， 它 使 用 一 个 过 渡 动 画 告 知 用 户 把 某 些 东西 添加 到 了 购物 车 (LE 10- 
7)， 这 样 做 一 举 两 得 : 


T Ta BE bc D ELE, 物品 己 被 添加 ; 
。 告知 用 户 ， 购 物 车 在 应 用 的 什么 位 置 。 











iPod = 11:58 AM = iPode 11:58 AM 


ROBEEZ Gigs 


ADD TO SHOPPING CART YN 












ADD TO SHOPPING CART YN 


PRODUCT DETAILS: 


PRODUCT DETAILS: 






It's never to soon to get geared for the > It's never to soon to get geared up for the > 
shore! shore! 

REVIEWS: REVIEWS: 

This product currently has 2 reviews > This product currently has 2 reviews > 
kikik kikrik 

ABOUT THE BRAND: ABOUT THE BRAND: 

For your child ‘s first leather shoe, choose > For your child 's first leather shoe, choose > 
Robeez. Since 1994, Robeez Footwear Ltd.... Robeez. Since 1994, Robeez Footwear Ltd.... 
VIDEO DESCRIPTION: VIDEO DESCRIPTION: 

View the Video Description for this product. > View the Video Description for this product. 


(Note the color shown may be unavailable. ) 


O © 





Search 
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(AS Ere ADEA Pe ae ARE HE “TAY” kii BANA, ANS 
8 3, 


s¥ a 


S 不 要 打扰 用 户 的 使 用 过 程 ， 当 用 户 执 行 了 不 可 撤销 的 操作 (如 永久 性 删除 ) 
Ly 时 ， 仪 显示 个 人 确认 窗口 就 行 了 。 


A 


10.4 图 表 垃 圾 


Edward Tufte 在 他 1983 年 写 的 书 The Visual Display of Quantitative Information 中 
提出 了 图 表 垃 圾 这 一 概念 ， 先 看 一 下 图 10-18。 
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A GIRL'S BEST FRIEND A 


S 
Average price of 2 one caret O 








410-18 是 图 表 垃 坡 还 是 信息 的 图 形 化 显示 ? 


我 个 人 认为 这 是 个 非常 好 的 图 形 化 信息 的 示例 ， 并 非 图 表 垃 圾 。 但 我 也 能 够 理解 维 
基 百 科 对 图 表 垃 圾 这 一 反 模 式 的 定义 :“ 在 图 表 或 图 形 中 那些 多 余 的 无 助 于 用 户 理 解 
图 未 的 信息 ， 或 者 会 让 阅览 者 分 心 的 视 沉 元素。 


10-19 是 来 日 Brain Challenge 应 用 的 反 模 却 示 例 ， 图 未 的 设计 、 双 重 梯度 的 列 、 
高 光 、 斜 面 、 阴 影 效果 、 把 图 标 按钮 用 作 标 签 ， 这 些 都 分 散 了 用 户 的 注意 力 ， 却 没 
有 提升 数据 的 可 读 性 。 另 一 个 例子 来 自 SmartGlance， 背 景 中 绿色 的 果 面 上 放 着 红 
色 的 山子 ， 用 户 基本 上 无 法 阅读 屏幕 上 的 信息 。 





Total Score 


Po 


CHALLE NEE 
ai aten 3] score: 2,700 
FE 


Good work! That's a 
nice report I got from 
ou. 











10-19 Brain Challenge 和 SmartGlance 应 用 
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QlikView 的 报告 模块 上 有 很 多 反 模 式 : 过 滤器 和 图 标的 隐喻 错位 、 报 告 选 择 方式 的 
标新立异 ， 还 有 图 表 垃 圾 。 大 约 一 半 屏 幕 都 用 图 片 罗 盘 来 显示 图 表 (以 及 对 图 表 操 
作 后 的 反应 )。 其 他 空间 则 用 来 显示 体 量 庞大 、 五 彩 斑 澜 、 带 有 模糊 标签 的 三 维 图 表 
( 见 图 10-20), 








Docs 
anti~ 
L 


Patte rr } 


i — ioa 
m vir Eie [aee penr 


— MD te pce 














10-20 QlickView 应 用 


不 要 以 为 深 亮 的 图 表 就 一 定 清晰 明了 。 图 表 垃 圾 通 负 都 华而不实 ， 都 会 让 图 表 看 上 
去 更 美妙 。 例 如 ， 在 以 下 这 个 分 析 软 件 中 ， 图 中 的 曲线 是 表示 平均 值 还 是 国 值 ? 不 ， 
都 不 是 ， 它 仅仅 是 背景 的 一 部 分 。Gerald Nunn 的 OnTrack 用 不 同 的 颜色 表示 数据 
re EIERTBIP*N 〈 见 图 10-21), 


WeatherPro 的 图 表 非 常 漂亮 ,但 如 琳 没 有 以 下 因素 ， 这 些 图 表 会 更 加 多 读 : 


。 每 一 列 中 相互 交错 的 斜 线 ， 
。 元 余 的 了 轴 标 签 
。 小 时 数 的 累加 。 
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AM 48 12:16 AM 





www.grafkunstenaar.ni Visitors 
Glucose Graph 


12.0 


ant~ 


n 
Pattern WITH VOPIUM 


201009 1201 009220 1 0092 £01 0092201 0092201 0092801 009280 1009280100927 





® Pageviews/Day 
20100927 BI 11.35%(107) 


20100926 Ml 11.45%(108) 


20100925 B 7.64%(72) 
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如 图 10-22 所 示 ， 缩 得 日 期 标签 ( 改 成 Mon、Tue、Wed 等 )， 就 可 以 采用 更 大 、 更 
易 读 的 字体 。 图 例 也 能 起 到 更 大 的 作用 。 进一步 研究 之 后 发 现 ， 图 标 “i” 能 打开 图 
例 。 理 想 状 况 下 ， 应 该 默认 显示 图 例 ， 并 通过 选项 隐藏 ， 参 见 第 6x, 





NEW YORK 


Temperature 


| 


58 
54 
50 | 
46 | 
42 
38 
34 





30 
00 06 12 18/00 06 12 18 00 06 12 18 00 06 12 18 00 06 12 18 00 06 12 18 00 06 12 18 
sday Wednesday Thur urday Sunday Monday 








10-22 WeatherPro 应 用 
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在 把 玩 WeatherPro 时 ， 我 过 到 了 为 一 个 隐喻 蚀 位 。 你 需要 拉 下 屏 硕 才能 共 至 图 表 ， 但 
这 一 操作 和 手势 通常 用 来 刷新 数据 。 图 10-23 是 该 软件 的 客户 对 于 这 种 设计 方式 的 反馈 。 





Pull to share!? Hmm... &*&*& 
by Lewis Burgess 


Really don't like the new pull down to share. It's counter intuitive as this is how other apps refresh content. 


This should be a button, not a pull down gesture. 


Pull down to share? Stupid! *** 
by @revs 


This is a great app, but the "pull down to share" is stupid and keeps getting activated by mistake. 


Please make an option to turn this off, or change it to pull down to refresh. 











10-23 WeatherPro 应 用 


Va 


在 图 表 和 图 形 中 ， 仅 使 用 那些 有 助 于 传达 所 显示 信息 的 视觉 元 素 . 


10.5 ”按钮 海 

2002 年 ， 当 我 和 Bill Scott 审查 Sabre Airline Solutions 应 用 的 可 用 性 时 第 一 次 提出 
了 这 种 反 模式 。 我 们 俩 让 测试 小 组 评估 了 几 十 个 网 络 和 呆 面 应 用 ， 以 发 现 需 要 重新 
设计 用 户 界 面 的 应 用 程序 。 大 部 分 的 应 用 程序 都 是 用 Java Swing 或 Visual Basic 编 
写 的 ， 其 界面 的 右边 或 是 底部 都 有 一 个 按钮 栏 。 当 水 平 排列 的 方式 并 不 能 布局 完 所 
有 的 按钮 时 ， 就 用 两 行 来 显示 。 所 有 按钮 的 大 小 、 颜 色 、 视 觉 轻重 都 一 样 。 因 此 ， 
在 看 完 所 有 的 按钮 之 前 ， 用 户 很 难 决定 究竟 要 点 哪 一 个 〈 见 图 10-24), 

















10-24 FB Visual Basic 和 Java 编写 的 桌面 程序 界面 上 ， 放 有 眼 望 去 全 是 按钮 


eBay HY Android 版 应 用 正 是 如 此 ， 但 它 的 iPhone 版 应 用 却 使 用 了 仪表 式 的 导航 ， 
这 也 正 是 这 种 反 模 式 的 一 个 民 好 的 解决 方案 ( 见 图 10-25)。 
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eBay Mobile: rusty3144 





Watching Selling 
25 0 





Watching ; Buying : Selling 


Bidding Sold 6 
1 0 pa eee eoe aa a a a a a a o a a aaao hhh diee aa ¢ 
Won Unsold | 4 Reminders O> 
3 0 | 
Didn't Win Scheduled | ud Messages e» 
3 0 | | 
| & Saved Searches > 
| 
eh :三 Browse Categories > 
Im | : 
& | | Your recent items 
Deals Messages 4 


10-25 Android 系统 下 的 eBay ， 按 钮 的 海洋 ， 而 在 IOS 系统 就 有 了 改善 


Footfeed (ILEI 10-26) 在 feed 中 显示 了 所 有 活动 的 所 有 选项 。1Mobile 在 表格 的 每 
一 行 后 面 显 示 相 同 的 按钮 ( 见 图 10-26)。 如 果 你 发 现 自己 总 是 在 某 个 列表 或 表格 的 











茶 一 行内 重复 显示 了 相同 的 按钮 ， 那 么 你 最 好 尝试 一 下 情境 工具 ， 参 见 第 5 半 。 


Logout 1 WVIORILE Market 
A 


Adobe Flash Player Open | 
Dennis Mink Adobe Systems Incorporat... 


Hometown: Danville 
Advanced Task Kille Open | 
ReChild 


Email: dennis@footfeed.com 
I 
Recent Activity — Amazon MP3 Open | 
MP3 A 
Starbucks @ lil Mri ia 
San Ramon, CA = > 
四 ES [3 ASTRO File Manager open 
—€—— Metago 


1 hours ago 
Bay Bridge Toll Plaza | 
3. 




















































Oakland, CA i Barcode Scanner 

6 hours ago e 9.8] ZXing discussion group 

Starbucks KA Bump 

Lafayette, CA 2? Bump Technologies LLC 

1 days ago = 
DriveSafe.ly 
DriveSafe lv 











10-26 Footfeed 和 1Mobile Market: 用 情境 工具 代替 重复 的 按钮 
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EAZ P, Pushbi 好 像 使 用 了 标准 的 操作 栏 ， 但 实际 并 非 如 此 ， 它 的 设计 完全 是 1 
按钮 和 海 。 导 航 按 钮 与 操作 按钮 (主页 、 返 回 、 图 表 、 设 定 、 分 享 ) 搅 在 一 起 。 即 便 
是 那些 仅 对 这 个 图 表 起 效 的 按钮 也 在 上 一 层级 显示 。VisualKPI 也 存在 同样 的 问题 ， 
ENUF ERE” ERRES OLE 10-27). 


at AT&T 全 12:00 PM cz iPod = 1:10 PM ^ Gab 


Transpara 
as of 3/26/2011 11:08:33 AM 










Mean-Time To Repair 


> a y 


Region-W 
Region-Tx 
Calculated 
Trend Description 

MultiPen Today vs yesterday 

Multi Scale Trends on different scales 
Bit OL BGood BH MHH Bunk BNis ON/A 





省 MEE" MEE © MEL. 


DT CAIENUED ALCOULIO,ING 


10-27 Pushbi X) VisualKPI 应 用 


ie: © 





s¥ a 


用 标准 模式 显示 页 面 层级 操作 。 为 内 容 项 的 层级 操作 使 用 情境 工具 ， 而 不 








征 重 复 相 同 的 按钮 。 尽 量 分 离 页 面 层 级 操作 与 导航 元 素 。 





附录 


A.1 其 他 资源 

本 书 的 网 站 和 博客 地 址 是 wWww.mobiledesignpatterngallery.com, 

flickr ýJ E| F i (www.flickr.com/photos/mobiledesign patterngallery/collections) 内 
有 各 个 模式 的 更 多 示例 。 

关于 专业 的 移动 应 用 设计 技巧 ， 请 关注 账户 @mobilepatterns。 


A.2 导航 
A.2.1 主要 导航 模式 


跳板 却 

利用 网 格 布局 各 个 同等 重要 的 内 容 项 ， 利 用 不 规则 的 布 
局 方式 凸显 某 些 项 的 重要 性 。 视 情况 使 用 个 性 化 和 用 户 
目 定 义 选 项 。 


列表 菜单 

列表 来 单 人 很 适合 用 来 显示 较 长 或 拥有 次 级 内 容 的 标题 。 
使 用 列表 菜单 的 应 用 应 该 在 所 有 次 级 屏幕 内 提供 一 个 选 
项 ， 用 以 返回 到 列表 菜单 。 通 和 常 的 做 法 是 ， 在 标题 栏 设 
置 一 个 市 有 列表 图 标 或 “菜单 ”字样 的 按钮 。 
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选项 卡 
为 已 选择 的 菜单 项 设置 不 同 的 视觉 效 末 ， 用 户 就 能 清晰 
地 知道 目 己 选择 了 哪 一 项 。 使 用 易于 识别 或 珊 有 标签 的 
图 标 。 


陈列 馆 式 
陈列 迄 式 导航 能 很 好 地 应 用 于 用 户 经 季 剖 览 、 频 营 更 新 
的 内 容 。 


仪表 式 
不 要 使 用 过 多 的 仪表 式 导 艇 ， 通 过 人 研究 确定 为 哪些 关键 
量度 采用 仪表 去 导航 。 
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隐喻 式 
道 慎 地 使 用 隐喻 式 导 航 ， 鉴 脚 的 模仿 很 可 能 造成 10.1 
节 出 现 的 反 模 式 。 


超级 菜单 式 

在 选择 寻 航 模式 之 前 ， 首 驳 要 确定 信息 架构 。 如 有 要 导 
航 的 对 象 仅仅 古 应 用 中 少数 主要 内 容 ， 就 可 以 使 用 选项 
卡 之 类 的 导航 模式 .。 








A.2.2 ”次 级 导航 模式 


页 面 轮 盘 式 

页 面 轮 盘 却 导 航 能 很 好 地 应 用 于 少量 页 面 的 导航。 利用 
直观 的 指示 絮 标 示 出 总 屏 数 和 用 户 当 前 所 处 的 位 置 。 页 
DFE ES SEAL UH Be AE AT ERIE 
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图 片 轮 盘 式 

图 片 轮 盘 式 导 航 可 以 很 好 地 展示 清新 悦目 的 内 容 ， 如 过 
术 品 、 产 品 和 照片 等 。 利 用 箭头 、 部 分 显示 的 图 片 或 页 
mma (点 )， 提 供 视觉 化 的 功能 可 见 性 ， 以 此 告知 
用 户 有 更 多 的 内 容 可 以 访问 。 





扩展 列表 式 
扩展 列表 式 导 航 能 很 好 地 逐步 显示 某 个 内 容 项 的 更 多 细 
O| 节 或 选项 。 
© 
© 
© 
© 
A.2.3 ”表单 模式 
| A ” ”登录 表单 
gn In deiade Xo DUT Beth, AH DL AY Beth 
e 案 ， 这 样 更 易于 用 户 登 录 。 提 供 取 回 已 忘记 密码 的 
POssv 5A. 
Sign In 


Regster | Forgot Password? 
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a 注册 表单 
注册 界面 应 该 人 简洁 明了 ， 最 好 在 一 屏 之 内 显示 完 所 有 要 








Register ji © 
填 的 信息 ， 把 “注册 ”按钮 放 在 同一 屏幕 内 显示 。 保 证 
— 已 注册 用 户 能 非常 容易 地 登录 。 


Register 


核对 表单 
a 把 提升 速度 、 效 率 和 让 用 户 放 心 作为 设计 目标 。 去 掉 不 
必要 的 输入 域 ， 尽 量 减少 页 面 和 操作 步骤 。 


> 





^. me $000 
Shippi thod 
Shipping address 
Payment method 
Ploce Order 
| 计算 表单 
使 用 标准 的 表单 设计 和 布局 原则 。 如 采 可 以 ， 在 同一 页 
面 内 显示 计算 结果 ， 位 置 尽量 明显 。 
Input 
Input 
Input 
Calculate 
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Search 








搜索 表单 
不 要 让 太 多 的 搜索 选项 吓 到 用 户 ， 把 搜索 条 件 控制 在 





一 页 之 内 。 采 用 能 够 通过 手指 方便 且 快 速 操作 的 控制 
Fines 
Show 100 Results 
(0 SORE 
FER 告知 用 户 当前 所 在 的 位 置 和 将 要 去 的 地 方 。 去 掉 不 必要 
— 的 输入 域 ， 最 小 化 页 面 和 操作 步骤 的 数量 。 


Submit 
长 表单 
不 要 人 为 地 把 表单 划分 成 多 个 步 又 来 避免 屏幕 的 滚动 。 
坚决 要 去 挥 那些 不 必要 的 输入 域 。 遵 人 循 特定 操作 系统 中 
按钮 布局 的 设计 标准 。 

Subrnit 








附录 | 187 


A.2.4 表格 模式 


有 表 头 的 表格 

不 要 使 用 上 暗色 网 格 线 和 垂直 分 割 方式 。 文 字 左 对 齐 ， 数 
字 右 对 齐 。 一 屏幕 内 显示 的 表格 内 容 不 宜 过 多 。 如 末 要 
在 单个 屏幕 内 显示 大 量 信息 ， 请 采用 其 他 显示 方式 。 








无 表 头 表格 

每 一 宽 行 内 最 多 显示 三 行 信 息 。 不 太 重 要 的 细 贡 内容 使 
用 较 小 、 浅 色 的 字体 。 不 要 自己 猜测 什么 信息 最 重要 ， 
而 要 询问 客户 的 意见 ， 然 后 作出 有 效 的 设计 。 


固定 列表 格 的 表格 
为 固定 的 列 设计 比较 醒目 的 样式 ， 利 用 背 动 操作 浏 贤 
多 的 数据 。 
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带 有 内 容 总 览 和 数据 的 表格 
表格 内 容 总 贤 应 该 显示 在 数据 上 方 ， 且 要 一 目 了 然 。 





$3000.00 A 


行 分 组 表格 
在 表格 中 为 内 容 总 结 行 设 定 与 其 他 行 不 同 的 视觉 效 末 。 


级 联 式 列表 

使 用 较为 宽 沁 的 信息 结构 可 以 避免 在 应 用 内 产生 较 次 的 
层次 (多 于 3 层 )。 如 采用 级 联 式 列 表 来 导航 用 户 定义 
的 信息 结构 ， 则 可 能 无 法 避免 产生 很 多 界面 层次 。 
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市 有 视觉 指示 器 的 表格 
使 用 那些 用 户 能 够 迅速 识别 的 视觉 化 指示 妖 ， 去 邱 那 些 
由 |。 不 必要 的 图 标 。 
ill 
ill 
ill 
ill 
ill 
ill 
ill 


可 编辑 表格 

网 络 和 桌面 应 用 程序 设计 之 间 的 权衡 为 可 编辑 表格 提供 
了 丰富 的 经 验 。 不 要 为 大 量 数 据 输 入 使 用 可 编辑 表格 ， 
当知 要 有 大 量 可 编辑 元 素 时 ， 也 不 要 使 用 这 种 表格 模 





E A 
2 
A.2.5 搜索 模式 
显 性 搜索 
— 在 输入 域 周 围 提 供 明显 的 操作 按钮 ， 并 提供 撤销 搜索 
的 选项 。 通 过 反馈 告知 用 户 搜索 动作 已 执行 (参见 第 
8 3€), 





190 | 附录 


— 4 


— | 


月 动 补 全 搜索 
如 琳 程 序 在 显示 搜索 结 采 时 有 延迟 ， 就 要 给 出 一 些 反 
馈 。 在 搜索 结 末 中 突出 显示 用 户 输 入 的 搜索 内 容 。 





动态 搜索 
对 于 有 限 的 数据 ， 如 地 址 湾 或 个 人 媒体 库 ， 这 种 搜索 模 
式 韭 第 有 效 ， 但 它 不 太 适 合用 来 搜索 海量 数据 。 


范围 搜索 
根据 数据 集 提 供 合理 的 搜索 范 围 选项 ，3 ~ 6 个 范围 选 
项 足 和 疾 。 用 搜索 表单 实现 高 级 搜索 功能 。 
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保存 搜索 记录 并 显示 最 近 搜 索 内 容 
保存 搜索 记录 通 第 要 执行 额外 的 步 又 来 为 搜索 命名 ，[ 以 
| 后 用 ;显示 地 这 搜索 内 容 有 的 做 法 对 搜索 记录 的 你 存 比 











EE GEHEN. ELITR. PREAS OBA XC iU UR 
—— 户 需求 。 

TUNE 

Recent search B 

Recent ( 

Recent s 

Recent s 

Recent ; 


搜索 表单 
尽量 减少 输入 域 的 数量 。 为 特定 的 操作 系统 选择 适当 的 





Search 

x 输入 控制 。 参 考 最 佳 的 表单 设计 案例 (对齐 方式 、 标 
| 答 、 尺 寸 等 )， 参见 第 2 章 ， 

nrer 
Show 100 Results 


搜索 结果 /浏览 结果 
标明 已 找到 搜索 结 示 的 总 项 数 。 使 用 延 开 加载 ， 而 不 是 
分 页 显示 的 方式 。 设 定 一 种 合理 的 默认 分 类 模式 。 
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A.2.6 分 类 模式 


(ee 
Highest Pnce 
Lowest price Y 


Newest 


Most popular 
Recently popular 
Highest price 


Newest 


屏 内 分 类 

以 明确 的 方式 告知 用 户 当 前 采用 (生效 ) 的 分 类 选项 。 
如 琳 分 类 选项 无 法 很 好 地 与 触发 如 按钮 栏 融 合 ， 沽 虑 使 
用 分 类 排序 选择 絮 。 





分 类 排序 选择 器 

根据 操作 系统 的 设计 惯例 选择 控制 搜索 结 末 分 类 的 方 
法 ， 或 使 用 不 受 操 作 系 统 影响 的 界面 方案 。 要 请 晰 地 办 
用 户 表明 当前 采用 的 分 类 选项 。 


分 类 表单 
在 使 用 这 种 模式 之 前 ， 应 该 首先 考虑 使 用 其 他 更 为 有 效 
的 分 类 选项 触发 右 或 分 类 排序 选择 礁 。 
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A.2.7 过滤 模式 


屏 内 过 滤 

RE aN Ail igs cin, ATER. AP de 
Hj 4 i pF eke A VE FE e EB NB SE FH 
这 种 过 小 模式 ， 参 见 9.2.3 1. 





Scope A — Scope B Scope C 


过 滤 容 器 

保持 选项 列表 简洁 ， 避 人 免 深 屏 。 如 来 列表 较 长 或 有 多 个 
TREM, ee Abie ee. Z 6.1 He Ue A ze 
数据 的 示例 。 


过 滤 对 话 框 
保持 选项 列表 人 简洁， 避免 深 屏 。 如 末 列 表 较 长 或 有 多 个 
TRM, ee Abie. Zbl 6.1 He ue Al Ze 
数据 的 示例 。 


Apply 
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Criteria 
Criteria 


Criterio. 


Apply 


A.2.8 工具 模式 


TERE 

AN EAE UE a IT EERROR, fal LAY EAEE 
ae LUE A ao A tS A, ROR Eee, ， 请 参 
芳 优 秀 的 表单 设计 案例 。 


IARE 

工具 栏 通常 显示 在 屏幕 底 端 ， 包 含有 屏幕 级 的 操作 。 工 
具 栏 内 的 图 标 应 该 是 用 户 熟 悉 、 易 于 识别 的 ， 或 者 采用 
标签 加 图 标的 设计 。 








选项 菜单 

如 采 可 能 ， 采 取 直 接 交 互 式 的 议 计 方案 。 不 要 把 导航 隐 
藏 在 选项 薪 单 中 。 如 采 茶 一 屏 内 上 只 有 一 个 操作 选项 ， 苍 
虑 使 用 调用 动作 按钮 模式 。 
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Submit 


(« (+ ( (e (e 


调用 动作 按钮 

不 要 把 主要 操作 隐藏 在 菜单 中 ， 也 不 能 将 其 设计 成 无 法 
识别 的 工具 栏 图 标 。 一 定 要 让 其 显而易见 ( 民 好 的 对 比 
AR), PARAH (含义 清晰 的 标签 )。 


情境 工具 

如 采 可 能 ， 采 取 直 接 交 互 式 的 设计 方案 。 如 琳 需 要 按 
钮 ， 尽 量 将 其 放置 在 可 操作 对 象 的 旁边 。 使 用 用 户 熟 悉 
或 市 有 文字 标签 的 图 标 。 


内 联 操作 

如 果 可 能 ， 采 取 直 接 交 互 式 的 设计 方案 。 操 作 应 该 布局 
在 接近 于 可 操作 对 象 的 位 置 。 使 用 用 户 熟 悉 或 带 有 文字 
标签 的 图 标 。 每 个 对 象 最 多 只 能 有 1~2 种 内 联 操作 。 
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多 状态 按钮 
多 状态 按钮 非常 适合 一 系列 联系 紧密 、 
一 一 一 在 有 限 屏幕 空间 内 连续 执行 的 操作 。 

















批量 操作 
诸如 删除 和 重新 排序 之 类 的 批量 操作 最 好 在 编辑 模式 下 
进行 。 提 供 明显 的 选项 ， 让 用 户 可 以 退出 编辑 模式 。 











A.2.9 图 表 模 式 





市 过 滤器 的 图 表 

使 用 标准 的 UI 过 滤 控 制 副 以 及 过 滤 模 式 ， 参 见 第 4 
革 。 动 态 更 新 图 表 数 据 ， 而 不 是 扔 给 用 户 一 个 “应 用 ” 
FEAL 


\ 


GAS x _) m _} (im } 














4 u A 


Te Pss al OA Ed 

Pel Ze P EPU FI A af A e HUE AE TAS HL. A 
琳 是 可 交互 的 预览 窗口 ， 使 用 较 大 的 触摸 对 象 更 易于 用 
户 的 操作 。 








总 览 加 数据 式 图 表 
测试 图 表 ， 看 看 用 户 是 否 能 回答 以 下 三 个 简单 的 问题 : 
主题 是 什么 ”哪些 信息 最 为 重要 ? 最 重要 信息 的 具体 数 


AE e 


m 


数据 点 细节 图 

网络 应 用 的 图 表 让 人 们 形成 了 通过 “指针 巧 停 ”操作 
碍 看 细 贡 的 心理 预期 。 你 可 以 考虑 通过 “ 按 下 并 持续 
操作 来 显示 数据 点 的 详细 信息 ， 提 供用 户 所 需 的 更 多 


内 容 。 
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详细 信息 图 
吸引 用 户 查看 更 多 的 数据 。 用 面包 习 式 的 导航 显示 层级 
结构 。 


缩放 图 表 
诱导 用 户 旋 转 设备 来 以 全 屏 方 式 查看 图 表 ， 在 用 户 转 回 
设备 时 目 动 恢复 导航 。 


数据 透视 表 
在 一 屏 内 显示 数据 透视 图 表 的 已 选择 项 和 选择 结 末 。 根 
据 用 户 的 选择 动态 更 新 内 容 。 
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火花 谱 线 图 
遵守 火花 谱 线 设计 的 惯例 ， 让 用 户 测 试 设计 方案 。 结 合 
火花 谱 线 和 详细 信息 图 显示 图 表 的 所 有 细节 信息 。 











A.2.10 视觉 吸引 模式 
对 话 框 
IHREN Z — 4E ET BER. BAD RI EB E fi 
方式 访问 程序 的 使 用 说 明 。 


提示 

提示 要 尽 可 能 地 接近 它 所 指 癌 的 功能 ， 保 持 内 容 的 简 
洁 ， 在 交互 开始 时 (也 就 是 当 用 户 触摸 屏幕 上 时) 关闭 
提示 。 
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000/459 


DO THIS 


THEN THIS 


使 用 回 导 
使 用 向 导 能 很 好 地 从 用 户 使 用 目标 的 角度 出 发 ， 突 出 应 
用 的 主要 功能 。 兼 顾 内 容 简洁 和 视觉 效果 。 


视频 演示 
视频 演示 可 以 展示 应 用 的 关键 功能 ， 也 可 以 用 来 显示 应 
用 的 标准 使 用 流程 。 一 定 要 提供 第 见 的 视频 控制 选项 


(EIE. SEE. Hd). 


ZITA 

EHIN Fret CY ERRE, ANE A EEE ties 
得 的 混乱 不 堪 。 一 旦 交互 过 程 开始 (也 就 是 用 户 开 始 触 
tbe), BUERERAJATH. 
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Top to get started 


首次 使 用 引导 

一 定 要 利用 图 像 或 其 他 视 希 线索 明确 地 将 首次 使 用 5| 导 
与 其 他 内 容 区 别 开 来 (也 就 是 说 ， 不 要 为 视觉 吸引 元 素 
使 用 那些 常规 内 容 所 用 的 颜色 、 字 体 大 小 )。 





FFT AN tM S 
保持 持续 视觉 吸引 | 元素 的 简洁 。 用 图 像 或 其 他 视 沈 线索 
清晰 地 将 视觉 吸引 与 其 他 内 容 区 分 开 来 (也 就 是 说 ,不 











Add a cord 
要 使 用 常规 内 容 所 用 的 颜色 、 字 体 大 小 等 )。 
可 发 现 的 视觉 吸引 
Pull +o refresh Fa RSL MiSs], —EZRZA E, HIT. 
最 常见 的 这 种 视觉 吸引 模式 是 鼓励 用 户 刷新 数据 的 提示 。 
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A.2.11 反馈 模式 


Ay Email is required 


出 错 信息 





用 纯 语言 的 形式 提供 解决 问题 的 办 法 。 保 证 错误 信息 
T 清晰 可 见 ， 在 屏幕 内 和 能 入 错误 信息 ， 不 要 使 用 模式 对 
| ma TATE. 

User Name 
Password 
Register 


QJ Registration complete 
| 


确认 


当 用 户 执行 某 项 操作 时 ， 提 示 确 认 信 息 ， 但 不 要 打 断 用 
户 使 用 产品 的 过 程 。 参 见 第 10%, SiS p. 


系统 状态 





| Email 





告知 用 户 系 统 的 状态 。 为 可 
tk HB" EM, 


能 会 持续 较 长 时 间 的 操作 提 
User Name 
Password 
= IS Submitting . . . 
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A.2.12 功能 可 见 性 模式 


触摸 
用 常 见 的 视觉 效果 来 暗示 可 触摸 的 控制 项 。 一 定 要 小 心 
谨慎 地 使 用 三 维 效 果 ， 泛 小 的 阴影 和 斜 角 效果 会 降低 可 
PRE 


Submit 


Zi 


过 
xi 





ii 


TITS a as, BO aN FR R AN AHJ— Bb Aer AUH 
Ob TARE SAA. DREH c ero TI 


SÉ IR GR 
Rat ve 
W R 2 


je B2 
拖 动 手柄 的 图 标 一 定 要 易于 识别 。 为 拖 动手 柄 设计 一 个 
突出 的 效果 ， 以 此 告知 用 户 这 一 对 象 是 可 操作 的 。 
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A.2.13 帮助 模式 
”使 用 说 明 
"-— 在 使 用 说 明 中 综合 使 用 屏幕 截图 、 插 图 和 文本 等 多 种 





形式 .。 
Browse Help Topics 
Top Questions 
Report a Bug 
Give Feedback 
| 界面 元 素 说 明 
| Jd MICA UE RR ir a Ro, ER LALLA 
1 z 户 很 快 习惯 产品 的 使 用 方法 ， 也 能 提高 使 用 效率 。 
3 4 


1) desc nption 
2) desc nprion 


3) dest nption 





4) destnphon 
| | f FA f] = 
| fs FA I1 Ss Hr. HJ iE RR BEA SBE, ae AEA 
用 户 的 使 用 目标 开始 。 癌 导 的 设计 应 该 简短 、 充 满 吸 
5| 力 。 
< » 
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大 于 作者 


Theresa Neil 是 德 克 院 斯 州 奥 斯 洒 市 的 一 名 用 户 体 验 咨 询 师 。 她 组 建 了 一 个 用 户 体 验 
设计 小 组 ， 其 中 的 设计 师 和 开发 人 员 都 具有 十 分 丰富 的 从 业经 验 。 她 的 设计 小 组 与 客 
户 紧密 协同 ， 致 力 于 创建 能 令 人 产生 愉悦 、 提 升 工 作 效 率 和 自信 心 的 产品 。 她 最 新 的 
项 目 是 为 餐馆 设计 一 球 困 面 应 用 程序 ， 让 客户 能 在 自己 的 餐 时 前 点 餐 。 其 他 更 多 项 


WA 


EH. AE ah Ay ek www.theresaneilcom， 或 访问 她 的 Twitter ll&  @theresaneil, 
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移动 应 用 UI 设计 模式 


当 你 迫 于 压力 ， 有 要 制作 出 设计 精 民 、 易 于 使 用 的 移动 应 用 时 ， 根 
本 就 没 时 间 进 行 完 全 的 创新 。 这 本 人 简要 的 手册 提供 了 70 多 种 移 
动 应 用 设计 模式 作为 参考 ， 包 括 了 从 当前 :OS、Android、Black- 
Berry, WebOS, Windows Mobile 以 及 Symbian 平台 中 提取 的 400 多 
张 应 用 截图 。 


用 户 体验 设 计 大 师 Theresa Neil 将 向 你 介绍 包括 反 模 式 在 内 的 10 种 
不 同类 型 的 设计 模式 。 无 论 你 正在 设计 一 款 简单 的 iPhone 应 用 ， 
还 是 开发 适用 于 当前 市 场 上 所 有 流行 移动 操作 系统 的 上 应用， 这些 
设计 模式 都 能 助 你 一 辟 之 力 。 
本 书包 括 以 下 设计 模式 
m 导航 : 主要 导航 和 次 要 导航 模式 
表单 : 改变 全 行业 不 展 的 表单 设计 习惯 
表格 和 列表 : 只 显示 最 重要 的 信息 
搜索 、 分 类 和 过 滤 : 让 这 些 功能 易于 使 用 
: 营造 直接 交互 的 体验 
Ak: 借鉴 基本 图 表 的 经 典 设计 理念 
视觉 吸引 : 吸引 用 户 并 促使 其 发 现 产 品 功能 
控制 与 反馈 : 帮助 用 户 执行 操作 并 及 时 提供 反馈 
帮助 : 把 小 型 设计 理念 应 用 到 帮助 页 面 的 设计 中 去 
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封面 设计 : Karen Montgomery sk 

图 灵 社 区 : www.ituring.com.cn 

新 浪 微 博 : @ 图 灵 教 育 @ 图 灵 社 区 
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“这 是 一 本 能 激发 设计 灵感 的 超 
级 设计 手册 ! C 





Bill Scott, 
PayPal Web 开 发 部 门 


— ` ym 
高 级 总 监 


“千言 万 语 都 难以 表达 我 对 这 本 

书 无 尽 的 感激 ， 它 指导 我 对 正 

在 开发 的 应 用 进行 了 改进 ! ” 
— — Agatha June, 
用 户 体 验 设 计 师 
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电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同行 还 在 犹 
豫 仿 得 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行动 拥抱 这 个 
出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 
厂商， 图 灵 社 区 目前 为 读者 提供 两 种 DRM-free 的 阅读 
体验 : 在 线 阅 读 和 PDF。 











相 比 纸 质 书 ， 电 子 书 具 有 许多 明显 的 优势 。 它 不 仅 发 
布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 片 〈 即 使 
。 读 者 还 可 以 方便 地 进 








有 的 书 纸 质 版 是 黑 日 印刷 的 ) 
行 搜索 、 静 贴 、 复 制 和 打印 。 


欢迎 加 入 


公有 灵 任 区 


图 灵 社 区 进一步 把 传统 出 版 流程 导电 子 书 出 版 业务 
紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 网 上 
审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模 
式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 以 较 
快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 
往 翻 译 版 掖 术 书 “出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 
捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 
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的 质量 。 














最 方便 的 开放 出 版 平 合 


图 灵 社 区 向 读者 开放 在 线 写 作 功 能 ， 协 助 你 实现 目 出 
版 和 开源 出 版 的 梦想 。 利 用 “合集 功能， 你 就 能 联 
合 二 三 好 友 蕉 同 创 作 一 部 技术 参考 书 ， 以 免费 或 收费 
的 形式 提供 给 读者 。 (收费 形式 须 经 过 图 灵 社 区 立项 
评审 。) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 
的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 
书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 











图 灵 社 区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 
社区 公布 。 如 果 你 有 意 翻译 哪 本 图 书 ， 欢 迎 你 来 社区 
申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 
A. SR, 要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 古 
需要 有 坚强 的 新 力 的 。 


最 直接 的 读者 交流 平台 


在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 
误 、 发 表 评论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 员 和 
其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 
银子 。 








你 可 以 积极 参与 社区 经 常 开展 的 访谈 、 和 审读、 评选 
等 多 种 活动 ， 顾 取 积 分 和 银子 ， 积 累 个 人 声望 。 


